第五模块 WEB开发基础之DOM

1. 快速认识DOM

<!DOCTYPE html>
<html>
<head>
    <title>DOM</title>
</head>
<body>
    DOM: document object model 文档对象模型
    js中对象分为三种:
    1. 用户定义对象
    2. 内建对象 array date math
    3. 宿主对象 window

    将dom看做一颗树.
    dom把文档看作一颗家谱树.
    在html中, 标签就是dom对象, 这些dom对象又构成了家谱树(节点树).
</body>
</html>

2. DOM中节点分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02 节点</title>
</head>
<body>
    <p title="我是mjj" class="" id="">mjj</p>
    <ul>
        <li></li>
    </ul>
    <!-- 节点  node-->
    <!-- 1.元素节点(element node)  2.文本节点 (text node) 3.属性节点 (attribue node)-->

    <!-- 没有内容 的文档是没有任何价值的,而大多数内容都是有文本提供-->
    
</body>
</html>

3. 获取元素节点对象的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</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);
         console.log(typeof eleNode);
         // 2.document.getElementsByTagName()  获取出来的是一个节点对象集合  有点像数组  push()
         var olis = document.getElementsByTagName('li');
         var oTitle = document.getElementsByTagName('h2');
         console.log(oTitle[0]);
         console.log(olis.length);
         for(var i = 0; i < olis.length; i ++){
             console.log(olis[i]);
         }
         console.log(typeof olis);
         // 3.document.getElementsByClassName('item');获取出来的是一个节点对象集合  
         var oItems = document.getElementsByClassName('item');
         console.log(oItems);
     </script>
</body>
</html>

4. setAttribute()和getAttribute()用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class list</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];
         // 获取属性值 有一个必需的参数,这个节点对象的名字
         var title = oP.getAttribute('title');
         var className  = oP.getAttribute('class');
         console.log(title);
         console.log(className);

         // 设置属性值  setAttribute(name,value)
         oP.setAttribute('id', 'box');
    // 通过js设置的属性并不会反映在源码中
</script> </body> </html>

5. 节点对象的三个属性介绍

1. nodeName: 节点的名称
2. nodeValue: 节点的值
3. nodeType: 节点的类型

1. nodeName属性: 节点的名称, 只读
    1. 元素节点的nodeName与标签名相同
    2. 属性节点的nodeName与属性的名称相同
    3. 文本节点的nodeName永远是 #text
    4. 注释节点的nodeName永远是 #comment
    5. 文档节点的nodeName永远是#document

2. nodeValue属性: 节点的值
    1. 元素节点的nodeValue是undefined或null
    2. 文本节点的nodeValue是文本自身
    3. 属性节点的nodeValue是属性的值

3. nodeType属性: 节点的类型, 只读(浏览器不同, 值可能不同)
    以下常用的几种节点类型:
    元素类型     节点类型
    元素            1
    属性            2
    文本            3
    注释            8
    文档            9

 

<!DOCTYPE html>
<html lang="en">
<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.nodeName + "| " + oDiv.nodeValue + "| " + 
            oDiv.nodeType);

        // 2.获取属性节点
        var attrNode = oDiv.attributes[0];
        console.log(attrNode.nodeName + "| " + attrNode.nodeValue + "| " + 
            attrNode.nodeType);
// 3.获取文本节点 var textNode = oDiv.childNodes[0]; console.log(textNode.nodeName + "| " + textNode.nodeValue + "| " + textNode.nodeType); // 4.获取注释节点 var commentNode = oDiv.childNodes[1]; console.log(commentNode.nodeName + "| " + commentNode.nodeValue + "| " + commentNode.nodeType); console.log(document.nodeType); </script> </body> </html>

6. 节点对象的常用属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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);
        // 在chrome浏览器上会获取到text和p, 其中text指空格,在IE浏览器上只能获取到p.
        // console.log(oFather.childNodes[0]);
        // console.log(oFather.firstChild);
        // console.log(oFather.childNodes[oFather.childNodes.length - 1]);
        // console.log(oFather.lastChild);
        // console.log(oFather.parentNode.parentNode);
        console.log(oFather.nextSibling);
        // console.log(oFather.previousSibling);
     
  
    // 节点对象属性在各浏览器兼容性处理 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[0]); 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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>07 节点方法</title>
    <style type="text/css">
        .active{
            color: red;
            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');

         console.log(newNode === newNode2);// 两个节点不同

         newNode.innerHTML = '<a href="#">alex@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('alex');
         newNode.appendChild(textNode);
         */
         // newNode = null;//释放对象, 从内存中释放掉,放在最后

         // oDiv.removeChild(oAtive); 删除操作
         oDiv.replaceChild(newNode3, oAtive)


         // newNode.innerText = '<a href="#">alex@qq.com</a>'; 无法渲染标签, 只是字符串
     </script>
</body>
</html>

 8. 样式设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作样式</title>
    <style type="text/css">
        .highLight{
            background-color: black;
            color: white;
            width: 250px;
            height: 250px;
            line-height: 250px;
            text-align: center;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p id='box'>MJJ</p>
    <script type="text/javascript">
        // nodeObj.style
        var para = document.getElementById('box');
        /*
        1、直接操作样式属性
        console.log(para.style);  //获取所有属性, 属性都采用驼峰体
        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';
        // 通过这种方式设置的每个属性都设置成了行内样式style = 'color:red;'
        */

        // 2、通过控制属性的类名来控制样式(推荐使用这种方式)
        para.setAttribute('class', 'highLight');
        
    </script>
</body>
</html>

 9. 常用事件

常用事件
onclick      鼠标单击事件
onmouseover  鼠标经过事件
onmouseout   鼠标移开事件
onchange     文本框内容改变事件(常用于表单事件)
onselect     文本框内容被选中事件(常用于表单事件, 如选中下拉菜单中选项)
onfocus      光标聚焦事件(常用于表单事件, input输入框中插入光标)
onblur       光标失焦事件(常用于表单事件)
onload       网页加载事件

10. onclick事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style type="text/css">
        #box{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
     <!-- <div id="box" onclick="add();"></div> -->
     <div id="box" ></div>

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

         var isBlue = true;
         // 方式1: 匿名函数
         oDiv.onclick = function(){
             if (isBlue) {
                 // this 指向了当前的元素节点对象
                 this.style.backgroundColor = 'red';
                 isBlue = false;
             }else{
                this.style.backgroundColor = 'blue';
                 isBlue = true;
             }
         };
         // 方式2: 声明一个函数, 将函数名赋值给事件(推荐使用这种方式)
         /* var add = function(){
             alert(1111);
         }
         oDiv.onclick = add;*/

         // 方式3: 较繁琐, 不推荐使用
         /*<div id="box" onclick='add();'></div>
         function add(){
             alert(1111);
         }*/
         
     </script>

</body>
</html>

 11. 鼠标悬浮事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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.找到触发的事件对象    
        var oDiv = document.getElementById('box');
        // 2.鼠标滑过事件  
        oDiv.onmouseover = function(){
            console.log(111);
            // 3.事件处理程序
            this.style.backgroundColor = 'green';
        }
        // 2.鼠标移开事件  
        oDiv.onmouseout = function(){
            // 3.事件处理程序
            this.style.backgroundColor = 'red';
        }

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

12. 光标聚焦和失焦事件

<!DOCTYPE html>
<html lang="en">
<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="wpd" 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>

13. 表单控件上内容选中和改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容选中事件和内容改变事件</title>
</head>
<body>
    <!-- onselect onchange -->
    <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>

14. 窗口加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口加载事件</title>
    <script type="text/javascript"> //多数写在head中,但是代码加载顺序是从左往右,从上往下
        /*
        setTimeout(function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'alex';
            }
        }, 0)
        */
        // 等待文档元素加载完成才会调用onload(), 如果在head中写script, 则应使用window.load, 但是window.load存在事件覆盖的问题.
        window.onload = function(){
            var oDiv = document.getElementById('box');
            console.log(oDiv);
            oDiv.onclick = function(){
                this.innerHTML = 'alex';
            }
        }
        // window.onload = function(){
        //     console.log(11111);
        // }

    </script>
</head>
<body>
    <div id="box">MJJ</div>
</body>
</html>

 

posted @ 2020-09-15 15:53  自由者妍  阅读(234)  评论(0)    收藏  举报