python 学习_第五模块 DMO

python 学习_第五模块 DMO

1. 节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02 节点</title>
</head>
<body>
    <p title="我是yy" class="" id="">yy</p>
    <ul>
        <li></li>
    </ul>
    <!-- 节点  node-->
    <!-- 1.元素节点(element node)  2.文本节点 (text node) 3.属性节点 (attribue node)-->
    <!-- 没有内容 的文档是没有任何价值的，而大多数内容都是有文本提供-->
</body>
</html>

 

 

2. 获取元素节点的方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>获取元素节点的方式</title>
</head>
<body>
    <h2>你要买什么课程？</h2>            
    <p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
    <ul id='classList'>
        <li class='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>
    <!--节点类型
        1. 元素节点
        2. 属性节点
        3. 文本节点-->
    <script type="text/javascript">
        // 1 document.getElementById() 单个对象
        var eleNode = document.getElementById('classList');
        console.log(eleNode);  // 整个ul
        console.log(typeof eleNode); // object

        //  2 document.getElementsByTagName()  获取一个对象集合  有点像数组   
        var olis = document.getElementsByTagName('li');
        console.log(olis);  // HTMLCollection(3) [li.item, li.item, li]
        console.log(typeof olis); // object

        var oTitle = document.getElementsByTagName('h2');
        console.log(oTitle); //HTMLCollection [h2]
        console.log(oTitle[0]); // <h2>你要买什么课程？</h2>    

        for (var i = 0; i <olis.length; i++ ){
            console.log(olis[i]); 
        }
        console.log(typeof olis);  //object

        // 3 document.getElementsByClassName('item'); 获取出来的是一个节点对象集合
        var oItems = document.getElementsByClassName('item');
        console.log(oItems); //HTMLCollection(2) [li.item, li.item]

    </script>
</body>
</html>

 

 

3. 获取属性和设置属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>获取属性和设置属性</title>
    <style type="text/css">
        #box{
            color: red;        }
    </style>
</head>
<body>
    <h2>你要买什么课程？</h2>
    <p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
    <ul id='classList'>
        <li class='item'>JavaScript</li>
        <li class='item'>css</li>
        <li>DOM</li>
    </ul>
    <script type="text/javascript">
        var oP = document.getElementsByTagName('p')[0]
        // console.log(oP);
        //  1 获取属性值 有一个必需的参数，这个节点对象的名字    getAttribute('title')
        var title = oP.getAttribute('title');
        console.log(title); // 请您选择购买的课程
        // var className = oP.getAttribute('class');
        // console.log(className);//null


        // 2 设置属性值  setAttribute(name,value)
        oP.setAttribute('id','box');

    </script>
</body>
</html>

4 节点属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>节点属性</title>
</head>
<body>
    <!-- nodeName   nodeValue  nodeType -->
    <div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>
    <script type="text/javascript">

        // 1 元素节点
        var oDiv =  document.getElementById('box');
        // console.log(oDiv);   //<div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>
        console.log(oDiv.nodeName + "|"+oDiv.nodeValue+"|"+oDiv.nodeType); //DIV|null|1

        // 2 获取属性节点
        var attrNode = oDiv.attributes[0];
        // console.log(attrNode); // id='box'
        console.log(attrNode.nodeName + "|"+attrNode.nodeValue+"|"+attrNode.nodeType);  //id|box|2
 
        // 3 获取文本节点
        var textNode = oDiv.childNodes[0];
        // console.log(textNode); // "我是一个文本节点"
        console.log(textNode.nodeName + "|"+textNode.nodeValue+"|"+textNode.nodeType);   //#text|我是一个文本节点|3

        // 4 获取注释节点
        var commentNode = oDiv.childNodes[1];
        // console.log(commentNode); //<!--我是注释-->
        console.log(commentNode.nodeName + "|"+commentNode.nodeValue+"|"+commentNode.nodeType); //#comment|我是注释|8


        console.log(document.nodeType);  //9

    </script>
</body>
</html>

5 节点常用的其他属性

<!DOCTYPE html>
<html>
<head>
    <title>节点对象的常用其他属性</title>
</head>
<body>
    <div class="previous">我是上个兄弟</div><div id="father"><p>mjj</p><p>mjj2</p></div><div class="sibling">我是下个兄弟</div>

    <script type="text/javascript">
        var oFather = document.getElementById('father');
        console.log(oFather.childNodes[0]);         // <p>mjj</p>
        console.log(oFather.childNodes[1]);         // <p>mjj2</p></div>
        console.log(oFather.firstChild);               // <p>mjj2</p></div>
        console.log(oFather.childNodes[oFather.childNodes.length - 1]);//<p>mjj2</p></div>
        console.log(oFather.lastChild);              // <p>mjj2</p></div>
        console.log(oFather.parentNode.parentNode);  // 父节点
        console.log(oFather.nextSibling);              //<div class="sibling">我是下个兄弟</div>
        console.log(oFather.previousSibling);       //<div class="previous">我是上个兄弟</div>
    </script>
</body>
</html>

6 节点对象属性在各浏览器兼容性处理

<!DOCTYPE html>
<html>
<head>
    <title>节点对象属性在各浏览器兼容性处理</title>
</head>
<body>
    <div class="previous">我是上个兄弟</div>
    <div id="father">
        <p>mjj</p>
        <p>mjj2</p>
    </div>
    <div class="sibling">我是下个兄弟</div>

    <script type="text/javascript">
        var oFather = document.getElementById('father');

        //  获下面的元素节点
        function get_childNodes(fatherNode){
            var nodes = fatherNode.childNodes;
            var arr = []; // 保存已经获取的元素节点对象
            for (var i=0; i <nodes.length; i++){
                if (nodes[i].nodeType===1){
                    arr.push(nodes[i]);
                }
            }
            return arr;
        }
        var childnodes = get_childNodes(oFather);
        console.log(childnodes); // [p, p]

        // 获取上一个节点
        function get_previousSibling(n){
            var x = n.previousSibling;
            while (x && x.nodeType != 1){
                x = x.previousSibling;
            }
            return x;
        }
        console.log(get_previousSibling(oFather));


        // 获取下一个节点
        function get_nextSibling(n){
            var x = n.nextSibling;
            while (x && x.nodeType != 1){
                x = x.nextSibling;
            }
            return x;
        }
        console.log(get_nextSibling(oFather));
    </script>
</body>
</html>

 

7 节点方法

<!DOCTYPE html>
<html>
<head>
    <title>07 节点方法</title>
    <style type="text/css">
        .active{
            color: black;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p id="active">mjj</p>
    </div>

    <!-- 
        动态的操作节点
        1.创建节点  createElement()
        2.插入节点  appendChild()
                   insertBefore(newNode,node)
             3.删除节点 removeChild(childNode)
             4.替换节点 replaceChild(newNode,node)
             5.创建文本节点 createTextNode()
     -->
     <script type="text/javascript">
         var oDiv = document.getElementById('box');
         var oAtive = document.getElementById('active');


         var newNode = document.createElement('p');
        var newNode2 = document.createElement('p');
        var newNode3 = document.createElement('a');
        newNode.innerHTML = ' <a href="#">test@qq.com</a>';
        newNode2.innerHTML = '<a href="#">mjj@qq.com</a>';
        newNode3.setAttribute('href','http://www.baidu.com');
         newNode3.innerHTML = '百度一下';


         newNode.setAttribute('class','active');
         oDiv.appendChild(newNode);
         // 第一个参数是新插入的节点，第二个参数是参考的节点
         oDiv.insertBefore(newNode2,oAtive);

         /*    创建文本节点
         var textNode = document.createTextNode('ssss');
         newNode.appendChild(textNode);
        */

        // newNode.innerHTML = 'WWWWWW';
        // newNode.innerHTML = ' <a href="#">test@qq.com</a>';
        // newNode.innerText = '<a href="#">test@qq.com</a>';



        // oDiv.removeChild(oAtive);  //删除
        oDiv.replaceChild(newNode3, oAtive)  // 替换



     </script>
</body>
</html>

8 动态操作样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态操作样式</title>
    <style type="text/css">
        .hightLight {
            background-color: black;
            color: white;
            width: 250px;
            height: 250px;
            line-height: 250px;
            text-align: center;
            font-size: 30px;

        }
    </style>
</head>
<body>
    <p id='box'>wer</p>
    <script type="text/javascript">
        var para = document.getElementById('box');
        // console.log(para.style);

        /*
        // 1 直接操作样式
        para.style.color = 'white';
        para.style.backgroundColor = 'black';
        para.style.width = '250px';
        para.style.height = '250px';
        para.style.textAlign= 'center';
        para.style.lineHeight = '250px';
        para.style.fontSize = '30px';
        */

        // 2、通过控制属性的类名来控制样式
        para.setAttribute('class','hightLight');

    </script>
</body>
</html>

 

 

9 事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事件</title>
    <!-- 
    onclick     鼠标点击事件
    onmouseover    鼠标经过事件    
    onmouseout    鼠标移开事件
    onchange    文本框内容改变事件
    onselect    文本框内容被选中事件
    onfocus        光标聚焦事件
    onblur        光标失焦事件
    onload        页面加载事件
     -->
     <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
     </style>
</head>
<body>
    <div id="box" ></div>
    <script type="text/javascript">
        var oDiv = document.getElementById('box');
        var isBlue = true;
        oDiv.onclick = function(){
            if (isBlue){
                // this 指向了当前的元素节点对象
                this.style.backgroundColor = 'red';
                isBlue = false;
            }else{
                this.style.backgroundColor = 'blue';
                isBlue = true;
            }
        }



        // function add(){
        //     alert("wwwwwwwwwwwwwwwww");
        // }
        // oDiv.onclick=add;

    </script>

</body>
</html>

 

10 鼠标悬浮事件

<!DOCTYPE html>
<html>
<head>
    <title>onmouseover()onmouseout()事件</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">
    </div>
    <script type="text/javascript">
    // 1 找开关  2 按一下   3 灯亮了

    // 1. 找到触发的时间对象   2 事件   3 事件处理程序 
    var oDiv = document.getElementById('box');
    
    //  2 鼠标滑过事件
    oDiv.onmouseover = function(){
        this.style.backgroundColor = 'green';
    }

    // 3 鼠标移开事件
    oDiv.onmouseout = function(){
        this.style.backgroundColor = 'red';
    }
    </script>
</body>
</html>

11 表单控制事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单控制事件</title>
    <style type="text/css">
        .text{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <form action="">
        <p class="name">
            <label for="username">用户名：</label>
            <input type="text" name="user" id="username">
        </p>
        <p class="pwd">
            <label for="pwd">密码：</label>
            <input type="password" name="pwd" id="pwd">
        </p>
        <input type="submit" name="">
    </form>
    <script type="text/javascript">
        var userName = document.getElementById('username');
        var newNode = document.createElement('span');
        userName.onfocus = function(){
            newNode.innerHTML = '请输入用户名';
            newNode.setAttribute('class', 'text')
            userName.parentNode.appendChild(newNode);
        }

        userName.onblur = function(){
            newNode.innerHTML = '请输入正确的用户名';
            newNode.setAttribute('class', 'text')
            userName.parentNode.appendChild(newNode);
        }    

    </script>
</body>
</html>

 

 

12 内容选中事件和内容改变事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>内容选中事件和内容改变事件</title>
</head>
<body>
    <p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
    <textarea cols="30" rows="10">请写入个人简介，字数不少于200字</textarea>
    <input type="text" name="" value="mjj">
    <script type="text/javascript">
        var textArea = document.getElementsByTagName('textarea')[0];
        var inputObj = document.getElementsByTagName('input')[0];

        textArea.onselect = function(){
            console.log('内容被选中');
        }

        inputObj.onchange = function(){
            console.log('内容被改变了');
        }

        // inputObj.oninput = function(){
        //     console.log('内容被实时改变了');
        //     console.log(this.value);
        // }

    </script>
</body>
</html>

 

 

13 窗口加载事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>窗口加载事件</title>
</head>
<body>
    <script type="text/javascript">
        /*
        setTimeout(function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'qqqqqqq';
            }
        }, 0)
        */

        // 等待文档元素加载完成才会调用onload()
        window.onload = function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'qqqqqq';
            }
        }
        // window.onload = function(){
        //     console.log(11111);
        // }
        

    </script>
    <div id="box">ssssss</div>
</body>
</html>

 

 

14  获取其它DOM（事件源）的三种方式

 

var oDiv1 = document.getElementById("box1");      
//方式一：通过id获取单个标签

var oDiv2 = document.getElementsByTagName("div")[0];     
//方式二：通过 标签名 获得 标签数组，所以有s

var oDiv3 = document.getElementsByClassName("box")[0];  
//方式三：通过 类名 获得 标签数组，所以有s

 

 

15 常用事件

 

 

 

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/augustyang/p/11301590.html