DOM笔记

什么是DOM?

　　- DOM文档对象模型,一个HTML文件就是一个DOM树(文档树).

　　- node节点,每个节点就是DOM树的树杈,树叶等.节点分类:1.元素节点(html的标签),2.文本节点,3.属性节点.

一、节点(node)类型

<p title="我是mjj" class="" id="">mjj</p>

　　1.元素节点（element node）

　　　　整个<p></p>

　　2.文本节点(txt node)

　　　　mjj

　　3.属性节点(attribue node)

　　　　title="我是mjj" class="" id=""

二、获取元素节点对象的方法

    <h2>你要买什么课程?</h2>
    <p title="请选择购买的课程">本课程是WEB全栈课程,期待你的购买</p>
    <ul id="classlist">
        <li class="item">JavaScript</li>
        <li class="item">css</li>
        <li class="item">DOM</li>
    </ul>

　　1. document.getElementById() 通过ID获取单个对象

    <script type="text/javascript">
        var elenode = document.getElementById('classlist');
        console.log(elenode)
    </script>

　　获取到整个<ul></ul>标签对象

　　2. document.getElementsByTagName() 通过标签名获取出来的是一个节点对象集合

        var olis = document.getElementsByTagName('li')
        console.log(olis)

结果:
HTMLCollection(3) [li.item, li.item, li.item]
0: li.item
1: li.item
2: li.item
length: 3
__proto__: HTMLCollection

通过for循环遍历对象,可得到每一个li标签
        for(var i=0; i<olis.length; i++){
            console.log(olis[i]);
        }

通过下标方式获取li标签
console.log(olis[0]);

　　3. document.getElementsByClassName() 通过类名获取节点对象

        var oitems = document.getElementsByClassName('item')
        console.log(oitems)

　　结果如下:

HTMLCollection(3) [li.item, li.item, li.item]

　　可通过下标访问,或for循环遍历访问.

四、获取标签的某个属性值、设置标签的属性

　　1.getAttribute()

        var oP = document.getElementsByTagName('p')[0]; //获取p标签
        var title = oP.getAttribute('title');  //获取p标签的title属性值
        console.log(title);

输出结果：
请选择购买的课程

如果没有该属性值，则输出：
null

　　2.setAttribute(name, value) 对html文档的修改不会显示客户端的网页源码中,动态刷新不会影响静态文档

    <style type="text/css">
        #box{
            color: red;
        }
    </style>

oP.setAttribute('id', 'box');

　　通过setAttribute为标签添加属性,使<p>标签中的文字颜色变为红色.(动态改变)

　　DOM工作方式,先加载静态文档内容,再以动态内容进行刷新,动态刷新不影响静态内容.

五、DOM节点的三个重要属性

　　nodeName:节点名称 nodeValue:节点的值 nodeType:节点的类型

　　1. nodeName属性:节点的名称,是只读

　　　　-1. 元素节点的nodeName与标签名相同

　　　　-2. 属性节点的nodeName与属性名称相同

　　　　-3. 文本节点的nodeName永远是#text

　　　　-4. 文档节点的nodeName永远是#document

　　2. nodeValue属性:节点的值

　　　　-1. 元素节点的nodeValue是或null

　　　　-2. 文本节点的nodeValue是文本自身

　　　　-3. 属性节点的nodeValue是属性的值

　　3. nodeType属性:节点的类型,是只读的.

　　　　以下常用的几种节点类型:

　　　　　　元素类型　　　　节点类型

　　　　　　元素　　　　　　1

　　　　　　属性　　　　　　2

　　　　　　文本　　　　　　3

　　　　　　注释　　　　　　8

　　　　　　文档　　　　　　9

　　4.实例说明

    <div id="box">我是一个文本节点<!--我是注释--></div>
    <script type="text/javascript">
        <!--获取元素节点的三个属性-->
        var oDiv = document.getElementById('box');
        console.log(oDiv.nodeName);  //输出:DIV
        console.log(oDiv.nodeValue);  //输出:null
        console.log(oDiv.nodeType);  //输出:1


        <!--获取属性节点对象-->
        var oAttr = oDiv.attributes;
        console.log(oAttr);
        <!--输出如下:-->
        //NamedNodeMap {0: id, id: id, length: 1}
        //    0: id
        //    length: 1
        //    id: id
        //    __proto__: NamedNodeMap

        <!--获取ID属性节点的三个属性-->
        var attrId = oDiv.attributes[0];  //下标为0
        console.log(attrId.nodeName);  //输出:id
        console.log(attrId.nodeValue);  //输出:box
        console.log(attrId.nodeType);  //输出:2


        <!--获取文本节点的三个属性-->
        var textNode = oDiv.childNodes[0];  //文本节点是元素节点的子节点
        console.log(textNode.nodeName);  //输出:#text
        console.log(textNode.nodeValue);  //输出:我是一个文本节点
        console.log(textNode.nodeType);  //输出:3


        <!--获取注释节点三个属性-->
        var commentNode = oDiv.childNodes[1];
        console.log(commentNode.nodeName);  //输出:#comment
        console.log(commentNode.nodeValue);  //输出:我是注释
        console.log(commentNode.nodeType);  //输出:8

        <!--判断文档节点的类型-->
        console.log(document.nodeType); //输出:9

七、节点属性对象在浏览器中的兼容性解决方法

　　(去除换行空格等,从而获取到真正需要的节点对象)

 1         //获取所有的子节点对象函数(去除换行的干扰)
 2         function get_childNodes(fatherNode) {
 3             var nodes = fatherNode.childNodes;
 4             var arr = [];  //保存已经获取的元素节点对象
 5             for (var i=0; i<nodes.length; i++){
 6                 if (nodes[i].nodeType===1){
 7                     arr.push(nodes[i]);
 8                 }
 9             }
10             return arr;
11         }
12         //函数调用
13         var childnodes = get_childNodes(oFather);  //oFather是已经获取到的元素节点对象
14         console.log(childnodes[0]);  //获取第一个子节点对象
15 
16         //获取下一个兄弟节点对象函数
17         function get_nextSibling(n) {
18             var x = n.nextSibling;
19             while(x && x.nodeType !== 1){
20                 x = x.nextSibling;
21             }
22             return x;
23         }
24         //函数调用
25         console.log(get_nextSibling(oFather));  ////oFather是已经获取到的元素节点对象

八、元素节点对象的增删改查方法

　　动态的操作节点

　　1. 创建节点 createElement()

　　2. 插入节点 appendChild()

　　　　　　　　insertBefore(newNode, node)

　　3. 删除节点 removeChild()

　　4. 替换节点 replaceChild(newNode, node)

　　5. 创建文本节点 createTextNode()

 1     <div id="box">
 2         <p id="active">mjj</p>
 3 
 4     </div>
 5     <script type="text/javascript">
 6         //在DIV标签中插入一个新标签
 7         var oDiv = document.getElementById('box');  //获取div标签节点
 8         var newNode = document.createElement('p');  //创建p标签
 9         newNode.setAttribute('class', 'active'); //设置新建标签的class属性
10         oDiv.appendChild(newNode);  //将创建的p标签节点插入到div标签中
11         /*
12         var textNode = document.createTextNode('alex');  //创建文本节点
13         newNode.appendChild(textNode);  //将新建的文本节点加入到新建的P标签节点中
14         */
15         newNode.innerHTML = 'alex';  //采用innerHTMl属性插入文本节点
16         newNode.innerHTML = '<a href="#">百度一下</a>';  ////采用innerHTMl属性插入新标签节点
17         newNode.innerText = 'alex';  //该属性只能插入文本节点
18 
19         //newNode = null;  //释放对象(从内存中释放)
20 
21         //在P标签前面插入一个新的标签
22         var oAtive = document.getElementById('active');  //获取原代码中的老的P标签
23         var newNode2 = document.createElement('p');  //创建新的p标签
24         newNode2.innerHTML = '<a href="#">mjj</a>';  //向新P标签中添加内容
25         oDiv.insertBefore(newNode2, oAtive);  //在老的P标签前面插入新的P标签
26 
27         //删除对象
28         oDiv.removeChild(oAtive);  //删除oAtive对象,即老的P标签
29 
30         //替换对象
31         var newNode3 = document.createElement('a');  //创建新的a标签
32         newNode3.setAttribute('href', 'http://www.baidu.com');  //设置a标签的属性
33         newNode3.innerHTML = '百度一下';  //为a标签增加文本
34         oDiv.replaceChild(oAtive, newNode3);  //替换原来的p标签

九、动态样式设置

　　有两种方法来动态的设置样式：

　　　　1. 直接操作样式属性（相当于行内式）

　　　　2. 通过控制属性的类名来控制样式（前提是在样式中已经有定义好的）

 1         var para = document.getElementById('box');  //获取一个标签节点
 2         // 1. 直接操作样式属性(行内式)
 3         para.style.color = 'white';
 4         para.style.fontSize = '30px';
 5 
 6         // 2. 通过控制属性的类名来控制样式
 7         // 之前已经有设置好的样式
 8         <style type="text/css">
 9             .highLight{
10                 color: white;
11                 font-size: 30px;
12             }
13         </style>
14         // 为标签新设置一个类属性,也就设置了该标签的样式
15         para.setAttribute('class', 'highLight');

十、事件介绍和onclick事件

　　常用的事件:

　　　　onclick　　鼠标单击事件

　　　　onmouseover　　鼠标经过事件

　　　　onmouseout　　鼠标移开事件

　　　　onchange　　文本框内容改变事件 //与表单有关

　　　　onselect　　文本框内容被选中事件

　　　　onfocus　　光标聚焦事件

　　　　onblur　　光标失焦事件

　　　　onload　　网页加载事件

　　绑定事件示范:

　　　　事件需要定义为函数

 1     <style type="text/css">
 2         #box{
 3             width: 100px;
 4             height: 100px;
 5             background-color: blue;
 6         }
 7     </style>
 8 
 9 
10     <div id="box"></div>
11     <script type="text/javascript">
12         var oDiv = document.getElementById('box');  //获取div对象
13         oDiv.onclick = function () {  //为div对象绑定事件
14             alert('事件被触发了')  //弹出网页消息框
15         }
16     </script>

     <div id="box" onclick="add();"></div>  //另一种调用事件的方法(不建议使用这种方法)

　　　<script type='text/javascript'>
        function add() {  //定义事件函数
            alert('事件被触发了')  //弹出网页消息框
        }
　　　</script>

　　修改div的背景色:

 1     <script type="text/javascript">
 2         var oDiv = document.getElementById('box');  //获取div对象
 3         var isBlue = true;  //默认是蓝色背景
 4         //实现点击div格子,背景颜色不停变换
 5         oDiv.onclick = function () {
 6             if(isBlue) {
 7                 //this指的是div标签本身,相当于python类中的self
 8                 this.style.backgroundColor = 'red';
 9                 isBlue = false;
10             }else{
11                 this.style.backgroundColor = 'blue';
12                 isBlue = true;
13             }
14         };
15     </script>

十一、鼠标悬浮事件

　　一般做一个事件需要三步:

　　　　1. 找到触发的事件对象　　2. 对象绑定事件　　3. 事件处理具体程序

 1     <style type="text/css">
 2         #box{
 3             background-color: red;
 4             width: 300px;
 5             height: 300px;
 6         }
 7     </style>
 8 
 9 
10 
11     <div id="box"></div>
12     <script type="text/javascript">
13         // 1. 找到触发事件的对象
14         var oDiv = document.getElementById('box');
15         // 2. 绑定鼠标滑过事件
16         oDiv.onmouseover = function () {
17             // 3. 事件具体的处理过程
18             this.style.backgroundColor = 'green';
19         }
20 
21         // 2. 鼠标移开事件
22         oDiv.onmouseout = function () {
23             // 3. 事件具体的处理过程
24             this.style.backgroundColor = 'red';
25         }
26     </script>

十二、光标聚焦和失焦事件

　　聚焦: 节点对象.onfocus　　失焦: 节点对象.onblur

    <style type="text/css">
        .text{
            color: red;
            font-size: 12px;
        }
    </style>


    <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');  //在用户名输入框后创建span标签
        //获取焦点的事件
        userName.onfocus = function () {
            newNode.innerHTML = '请输入用户名';  //在span标签中添加文本
            newNode.setAttribute('class', 'text');  //设置span标签的样式
            //先获取输入框的父标签,再在父标签下添加span标签
            userName.parentNode.appendChild(newNode);  //把span标签添加到P标签下,即输入框后.
        }
        //失去焦点的事件
        userName.onblur = function () {
            newNode.innerHTML = '必须输入正确的用户名';
            newNode.setAttribute('class', 'text');
            userName.parentNode.appendChild(newNode);
        }
    </script>

十三、表单控件上内容选中和改变事件

　　选中: 节点对象.onselect　　改变: 节点对象:onchange 　　实时监测内容改变情况: oninput

 1     //报错
 2     <textarea cols="30" rows="10">请写入个人简介,字数不少于200字</textarea>
 3     <input type="text" name="" value="mjj">
 4     <script type="text/javascript">
 5         var textArea = document.getElementsByName('textarea')[0];
 6         var inputObj = document.getElementsByName('input')[0];
 7 
 8         textArea.onselect = function () {
 9             console.log('内容被选中了');
10         }
11         inputObj.onchange = function () {
12             console.log('内容被改变了');
13         }
14         inputObj.onchange = function () {
15             console.log(this.value)  //实时显示修改后的内容
16         }
17　　　　</script>

十四、窗口加载事件

　　窗口加载事件: window.onload

　　为啥使用onload: 通常js代码会编写在head中,根据网页加载的顺序,head是先加载,body后加载.所以js不会作用于body,也就失去了作用.

　　　　采用onload后,就改变了加载执行的顺序,先执行body,再执行js.

 1 <head>
 2     //js代码位于网页文档的head里面,传统的加载方法,使用延时器等待,等待body中网页加载完毕,再执行
 3     <script type="text/javascript">
 4         setTimeout(function () {  //使用延时器
 5             var oDiv = document.getElementById('box');
 6             console.log(oDiv);
 7             oDiv.onclick = function () {
 8                 this.innerHTML = 'alex';
 9             }
10         }, 0)
11     </script>
12 </head>
13 <body>
14     <div id="box">Mjj</div>
15 
16 </body>

 1 <head>
 2     //正确的方法,使用onload,等待文档元素加载完成后才会调用onload()
 3     <script type="text/javascript">
 4         window.onload = function () {
 5             var oDiv = document.getElementById('box');
 6             console.log(oDiv);
 7             oDiv.onclick = function () {
 8                 this.innerHTML = 'alex';
 9             }
10         }
11     </script>
12 </head>
13 <body>
14     <div id="box">MJJ</div>
15 
16 </body>

posted @ 2020-10-26 18:27 蓝蓝的白云天！阅读(101) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

蓝蓝的白云天！

DOM笔记

什么是DOM?

一、节点(node)类型

二、获取元素节点对象的方法

四、获取标签的某个属性值、设置标签的属性

1.getAttribute()

2.setAttribute(name, value) 对html文档的修改不会显示客户端的网页源码中,动态刷新不会影响静态文档

五、DOM节点的三个重要属性

1. nodeName属性:节点的名称,是只读

2. nodeValue属性:节点的值

3. nodeType属性:节点的类型,是只读的.

4.实例说明

七、节点属性对象在浏览器中的兼容性解决方法

八、元素节点对象的增删改查方法

九、动态样式设置

十、事件介绍和onclick事件

十一、鼠标悬浮事件

十二、光标聚焦和失焦事件

十三、表单控件上内容选中和改变事件

十四、窗口加载事件

公告

　　1.getAttribute()

　　2.setAttribute(name, value) 对html文档的修改不会显示客户端的网页源码中,动态刷新不会影响静态文档

　　1. nodeName属性:节点的名称,是只读

　　2. nodeValue属性:节点的值

　　3. nodeType属性:节点的类型,是只读的.

　　4.实例说明