一、DOM
- 1、排他思想
- 2、获取元素的属性值
- 3、设置属性的值
- 4、移出属性
- 5、H5对标签自定义属性的名称约定
- 6、H5中设置自定义属性的值
- 7、H5获取自定义属性的值
二、DOM的节点
- 1、什么是节点？
- 2、节点的属性
- 3、节点的层级
- 4、节点的获取
- 5、节点的创建
- 6、添加节点
- 7、删除节点
- 8、复制节点

一、DOM

1、排他思想

排他思想：排除掉其它元素(包括自己），然后再给自己设置想要的结果。
第一步：清除所有元素原有的样式。
第二步：给自己当前元素（包括自己）设置想要的效果。

示例一：点击一个按钮出现自己想要的结果，其它按钮不出现效果

<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script>//1.获取所有的按钮let btns=document.querySelectorAll('button')//2.给每个按钮绑定click事件for(let i=0;i<btns.length;i++){btns[i].onclick = function(){//2.1排他第一步，清除所有按钮的背景色for(let j=0;j<btns.length;j++){btns[j].style.backgroundColor=''}//2.2排他第二步：设置当前元素效果this.style.backgroundColor='pink'}}</script>
</body>

示例二：鼠标经过时改变表格行的背景色
(1)鼠标经过事件：mouseover
(2)鼠标离开事件：mouseout
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.bg{background-color: pink;}
</style>
<body><table border="1"><thead><tr><th width="100">学号</th><th width="100">姓名</th><th width="100">性别</th><th width="100">地址</th></tr></thead><tbody><tr align="center"><td>1001</td><td>张三</td><td>男</td><td>上海</td>   </tr><tr align="center"><td>1002</td><td>李四</td><td>女</td><td>新疆</td></tr><tr align="center"><td>1003</td><td>孙权</td><td>男</td><td>西安</td></tr><tr align="center"><td>1004</td><td>关公</td><td>男</td><td>江苏</td></tr></tbody></table><script>//1.获取tbody下的所有行var trs=document.querySelector('tbody').querySelectorAll('tr')//2.给trs中每行绑定鼠标事件，mouseover,mouseoutfor(let i=0;i<trs.length;i++){trs[i].onmouseover=function(){//鼠标经过颜色this.className='bg'}trs[i].onmouseout=function(){//鼠标离开时的颜色this.className=''}}</script>
</body>
</html>

2、获取元素的属性值

（1）元素对象.属性名—>不能获取元素自定义的值（eg:class)
（2）元素对象.getArrtibute(‘属性’)

<body><div id="demo" index="1" class="nav"></div><script>let div = document.querySelector('div')console.log('div:',div.id)//通过元素对象.属性值console.log('Class:',div.class)//输出undifindconsole.log('Class:',div.getAttribute('class'))console.log('Index:',div.getAttribute('index'))</script>
</body>

3、设置属性的值

（1）设置内置属性的值的方法：元素对象.属性名=‘要设置的属性值’
（2）设置不是内置属性的值的方法：元素对象.setAttribute(‘属性名’，‘要设置的属性值’)

<body><div id="demo" index="1" class="nav"></div><script>let div = document.querySelector('div')div.id='deyun'//设置内置属性的值的方法div.class='pt'//class不是内置属性，不能这样设置,不能更改属性的值div.setAttribute('class','pt')//使用setAttribute方法，第一个参数为类名，第二个参数为属性</script>
</body>

4、移出属性

元素对象.removeAttribute(‘属性名’)

<body><div id="demo" index="1" class="nav"></div><script>let div = document.querySelector('div')div.id='deyun'//设置内置属性的值的方法div.class='pt'//class不是内置属性，不能这样设置// div.setAttribute('class','pt')//使用setAttribute方法，第一个参数为类名，第二个参数为属性div.removeAttribute('class')</script>
</body>

由如下输出结果可知，class='pt’属性被移出：
### 小练习

<style>*{margin:0;padding:0;}li{list-style-type: none;}.tab{width:1000px;margin: 80px auto;}.tab_list{height:39px;border:1px solid #ccc;background-color:#f1f1f1;}.tab_list li{float:left;height:39px;line-height:39px;padding:0 20px;text-align:center;cursor:pointer;}.tab_list .current{background-color:#c81623;color:white;}.item{display:none;}</style>
<body><div class="tab"><div class="tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul></div><div class="tab_con"><div class="item" style="display:block;">商品介绍的内容</div><div class="item" >规格与包装的内容</div><div class="item" >售后保障的内容</div><div class="item">商品评价的内容</div><div class="item" >手机社区的内容</div></div></div><script>//1.获取tab元素let tab_list=document.querySelector('.tab_list')let lis=tab_list.querySelectorAll('li')//2.获取itemlet items=document.querySelectorAll('.item')for(let i=0;i<lis.length;i++){//2.1给每个li设置index属性lis[i].setAttribute('index',i)//2.2:给每个li绑定click事件lis[i].onclick =function(){for(let j=0;j<lis.length;j++){//2.2.1采用排他思想，设置鼠标点击时，li的样式lis[j].className='';}this.className = 'current';//2.2.2采用排他思想，设置显示的内容let index = this.getAttribute('index')for(let i=0;i<items.length;i++){//不显示所有的itemitems[i].style.display='none';}items[index].style.display='block'//显示tab对应的内容}}</script>
</body>

5、H5对标签自定义属性的名称约定

一般的自定义属性可以通过getAttribute(属性)方法来获取，但是有些自定义属性
很容易引起歧义，不容易判断是元素的自带属性还是自定义属性。因此，HTML5
新增了自定义属性的规范，在HTML 5中规定通过“data-属性名”的方式设置自定.
义属性。

data-属性名

6、H5中设置自定义属性的值

元素的“data-*” 自定义属性有两种设置方式，分别如下:

（1）在HTML中设置自定义属性

<body><!-- 在div元素上设置data-index属性 --><div data-index="2"></div>
</body>

（2）①元素对象.setAttribute('属性名’，‘值’）

<body><div></div><script>var div=document.querySelector('div')div.setAttribute('class','pt')</script>
</body>

②元素对象.dateset.属性名=‘值’

<body><div></div><script>var div=document.querySelector('div')div.dataset.index='2'</script>
</body>

7、H5获取自定义属性的值

（1）元素对象.getAttribute('属性名‘）
（2）元素对象.dataset.属性名
（3）元素对象.dataset['属性名’] （注意：存在浏览器兼容性问题）

示例：点击按钮，自定义的属性名item的值被改变。

<body><div id="dt" data-item="div1"></div><button onclick="change()">改变自定义属性的值</button><script>function change(){let div = document.querySelector('#dt')div.dataset.item = 'com1' //设置自定义属性item的值// console.log('item:',div.dataset.item)console.log(div.dataset['item'])}</script>
</body>

点击按钮之前：

点击按钮之后：

控制台查看：

注意：dataset是一个集合，里面存放了所有以date开头的自定义属性，
如果自定义属性里面包含有多个连字符(-)时,获取的时候采取驼峰命名法。

<body><div data-list-name="andy"></div><script>var div=document.querySelector('div')console.log(div.dataset['listName'])</script>
</body>

二、DOM的节点

1、什么是节点？

Html文档中的所有内容。

2、节点的属性

（1）节点类型：nodeType

①nodeType=1------>元素节点
②nodeType=2------>属性节点
③nodeType=3------>文本节点

示例：输出节点类型为1：说明是元素节点

<body><div id="dt" data-item="div1">西安邮电大学</div>  <script>let div =document.querySelector('#dt')console.log('节点类型：',div.nodeType) </script>
</body>

（2）节点名称：nodeName

<body><div id="dt" data-item="div1">西安邮电大学</div>  <p>西安</p><script>let div =document.querySelector('#dt')let p=document.querySelector('p')console.log('节点名称：',div.nodeName) console.log('节点名称：',p.nodeName) </script>
</body>

（3）节点的值：nodeValue

<body><div id="dt" data-item="div1">西安邮电大学</div>  <p>西安</p><script>let div =document.querySelector('#dt')let p=document.querySelector('p')let d=div.firstChild//获取div节点的第一个子节点let a=p.firstChild//获取p节点的第一个子节点console.log('节点值：',d.nodeValue) //获取d节点的节点值console.log('节点值：',a.nodeValue) //获取a节点的节点值</script>
</body>

3、节点的层级

（1）根节点：<html>,有且只能有一个。
（2）父节点：某个节点的上一级节点。
（3）子节点：某个节点的下一级节点。
（4）兄弟节点：两个节点拥有相同父节点的节点。

4、节点的获取

（1）获取父级节点：元素名.parentNode

<body><div id="dt" data-item="div1">西安邮电大学</div>  <script>let div =document.querySelector('#dt')console.log('div的节点类型：',div.nodeType)console.log('div的父级节点：',div.parentNode)  </script>
</body>

（2）获取子节点

a、元素名.childNodes:获取的是当前元素的所有子节点的集合

<body><div id="dt" data-item="div1">西安邮电大学</div>  <script>let div =document.querySelector('#dt')console.log('div的子节点',div.childNodes)console.log('div的子节点的类型',div.childNodes[0].nodeType)</script>
</body>

b、元素名.children:只返回子元素节点（不返回属性节点，文本节点）

<body><div id="dt" data-item="div1">西安邮电大学</div><script>console.log('div的子节点',div.childNodes)console.log('div的子节点（children）:',div.children)</script>
</body>

c、元素名.firstChild:返回元素的第一个子节点
d、元素名.lastChild:返回元素的最后一个子节点

<body><div id="dt" data-item="div1">西安邮电大学<p>电子商务专业</p></div>  <script>console.log('div的第一个子节点：',div.firstChild)console.log('div的最后一个子节点：',div.lastChild)</script>
</body>

e、元素名.firstElementChild:
f、元素名.lastElementChild:

<body><div id="dt" data-item="div1">西安邮电大学<p>电子商务专业</p><p>大数据专业</p></div><script>console.log('div的第一个子元素节点：',div.firstElementChild)console.log('div的最后一个子元素节点：',div.lastElementChild)</script>
</body>

（3）获取兄弟节点

a、元素名.nextSibling:获取下一个兄弟节点
b、元素名.previousSibling:获取上一个兄弟节点

<body><div id="dt" data-item="div1">西安邮电大学<p>电子商务专业</p><p>大数据专业</p>    </div><button onclick="change()">改变自定义属性的值</button><script>console.log('div的下一个兄弟节点：',div.nextSibling.nextSibling)//第一个兄弟节点是div自带的换行符，第二个next兄弟节点才是buttonconsole.log('div的上一个兄弟节点：',div.previousSibling)</script>
</body>

c、元素名.nextElementSibling:返回下一个兄弟元素节点（不包含文本节点、属性节点）
d、元素名.previousElementSibling:返回上一个兄弟元素节点（不包含文本节点、属性节点）

示例：下拉菜单，当鼠标经过菜单时显示其下拉菜单，同时隐藏其它下拉菜单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>*{padding: 0;margin: 0;}li{list-style-type:none;}a{text-decoration: none;font-size: 14px;}.nav{margin:100px;}.nav>li{/*外层的li标签*/position: relative;float:left;width:80px;height: 41px;text-align:center;}.nav li a{display:block;width:100%;height: 100%;line-height: 41px;color:#333;}.nav>li>a:hover{background-color: #eee;}.nav ul{ /*设置下拉菜单样式*/display:none;position:absolute;top:41px;left:0;width: 100%;border-left:1px solid #fecc5b;border-right:1px solid #fecc5b;}.nav ul li{/*下拉菜单项的下边框线*/border-bottom:1px solid  #fecc5b;}.nav ul li a:hover{/*鼠标悬停在下拉菜单项上时的样式*/background-color: #fff5da;}
</style>
<body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="'#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">留言板</a><ul><li><a href="'#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">电话</a><ul><li><a href="'#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li><li><a href="#">邮箱</a><ul><li><a href="'#">私信</a></li><li><a href="#">评论</a></li><li><a href="#">@我</a></li></ul></li></ul><script>//1.获取元素let nav = document.querySelector('.nav');let lis = nav.children;//2.给菜单绑定鼠标指针经过和鼠标离开时的时间for(let i=0;i<lis.length;i++){lis[i].onmouseover = function(){this.children[1].style.display='block'}lis[i].onmouseout = function(){this.children[1].style.display=''}}</script></body>
</html>

5、节点的创建

（1）doucument.write(‘字符串’)：字符串中可以包含标签、文本、属性。将字符串插入到文档流中会导致页面的重绘。
（2）元素名.innerHTML=‘文本’：将内容写入某个DOM节点，不会引起页面重绘。
（3）document.createElement(‘标签名’):效率比较低，但是结构清晰。

6、添加节点

（1）appendChild()方法：将一个节点添加到指定父节点的指定子节点末尾。

<body><div id="pt">西安邮电大学</div><p id="p1">西北政法大学</p><script>//1.获取元素let div = document.querySelector("#pt")let p = document.querySelector('#p1')//2.创建节点let span = document.createElement('span')span.innerHTML = 'gogo街区'//3.将span添加文档中p.parentNode.appendChild(span)//把他放在了body父标签里的子标签的末尾，与div,p标签并列</script>
</body>

（2）insertBefore(child，指定元素)方法：将一个节点添加到指定父节点的指定子节点前面。

<body><div id="pt">西安邮电大学</div><p id="p1">西北政法大学</p><script>//1.获取元素let div = document.querySelector("#pt")let p = document.querySelector('#p1')//2.创建节点let span = document.createElement('span')span.innerHTML = 'gogo街区'//3.将span添加文档中div.parentNode.insertBefore(span,div)</script>
</body>

7、删除节点

removeChild(child)用于删除节点，该方法从DOM中删除一一个子节点，返回删除的节点.

<body><div id="pt">西安邮电大学</div><p id="p1">西北政法大学</p><script>//1.获取元素let div = document.querySelector("#pt")let p = document.querySelector('#p1')//2.创建节点let span = document.createElement('span')span.innerHTML = 'gogo街区'//3.将span添加文档中div.parentNode.removeChild(div)</script>
</body>

页面输出（可以看到西安邮电大学所在节点消失）：

控制台也可以看到div那个节点被删除：

8、复制节点

复制节点的语法：需要被复制的节点.cloneChild(true/false/’ ')。

如果参数为空或false，则是浅拷贝，即只复制节点本身，不复制里面的子节点;如果括号参数为true，则是深拷贝，即会复制节点本身及里面所有的子节点。

①参数为空:浅拷贝，只复制节点本身，不复制节点的子节点。

<body><ul id="mylist"><li>苹果</li><li>橘子</li><li>香蕉</li></ul><ul id="op"></ul><script>//1.获取元素let mylist = document.querySelector('#mylist')let op = document.querySelector('#op')//2.复制‘苹果’let temp= mylist.firstChild.nextSibling//firstChild找到的是换行文本，并不是我们所需要的苹果，要加上nextSiblinglet cloneItem=temp.cloneNode()//浅拷贝op.appendChild(cloneItem)</script>
</body>

②参数为false:浅拷贝，只复制节点本身，不复制节点的子节点。

<body><ul id="mylist"><li>苹果</li><li>橘子</li><li>香蕉</li></ul><ul id="op"></ul><script>//1.获取元素let mylist = document.querySelector('#mylist')let op = document.querySelector('#op')//2.复制‘苹果’let temp= mylist.firstChild.nextSibling//firstChild找到的是换行文本，并不是我们所需要的苹果，要加上nextSiblinglet cloneU1 =temp.cloneNode(false)//浅拷贝 //3. 将复制的节点添加到op中op.appendChild(cloneU1)</script>
</body>

③参数为true:深拷贝，复制节点本身及其子节点。

<body><ul id="mylist"><li>苹果</li><li>橘子</li><li>香蕉</li></ul><ul id="op"></ul><script>//1.获取元素let mylist = document.querySelector('#mylist')let op = document.querySelector('#op')//2.复制‘苹果’let temp= mylist.firstChild.nextSibling//firstChild找到的是换行文本，并不是我们所需要的苹果，要加上nextSiblinglet cloneU2 =temp.cloneNode(true)//深拷贝//3. 将复制的节点添加到op中op.appendChild(cloneU2)</script>
</body>

【DOM相关知识汇总-学习小结】相关推荐

【LWIP】LWIP协议|相关知识汇总|LWIP学习笔记
这里作为一个汇总帖把,把以前写过的LWIP相关的博客文章汇总到一起,方便自己这边查找一些资料. 收录于: [LWIP]LWIP协议|相关知识汇总|LWIP学习笔记 LWIP协议 [LWIP]LWIP网 ...
网络基础知识汇总学习
一.网线(双绞线)连接线的制作双绞线制作有 568A 和 568B 两个标准,日常以 568B 标准较常用. 568B 标准按颜色排序为: 1- 橙白. 2- 橙.3- 绿白.4- 蓝. 5- 蓝白 ...
MySQL索引相关知识整理学习
MySQL索引相关知识整理学习前言一.MySQL索引哈希索引 B+树索引 B+树的优点聚簇索引非聚簇索引聚簇索引和非聚簇索引的特点及区别: 二.特殊类型的索引 1.覆盖索引 2.联合索引 ...
ODBC管理器相关知识汇总
ODBC管理器相关知识汇总最近,在使用终端应用程序调用数据库文件时,发生了:ODBC问题之驱动程序和应用程序之间的体系结构不匹配等问题,通过查阅资料,小有收获,汇总如下: ODBC:开放数据库互连, ...
Linux设备驱动程序——PCI相关知识的学习
PCI相关的知识的学习一.首先了解一下PCI相关的一些基础知识: PCI总线的结构: PCI总线结构是一种层次型的体系结构,在这个结构体中PCI桥设备占据重要的地位.将父总线和子总线连接在一起,使得 ...
kaggle 相关知识汇总(转载+自己整理)
本文只保留了重要的信息,泛泛之谈全部予以删除.(在知乎中分别搜索kaggle.Kaggle stack之后所有信息的摘录) 刚参加一个比赛,需要花点时间了解这个比赛的领域背景,甚至需要查一些资料或阅读 ...
沧小海笔记之基于xilinx的三速以太网相关知识的学习与理解
目录第一章读<图解TCP/IP>笔记第二章互联网概述第三章物理层介绍(基于88E1111) 第四章 xilinx 三速以太网IP核(TEMAC)的介绍第一章读< ...
j2ee tomcat https 证书等一系列相关知识的学习总结
在前一天的学习中我们知道.了解并掌握了Web Server结合App Server是怎么样的一种架构,并且亲手通过Apache的Http Server与Tomcat6进行了整合的实验. 这样的架构的好 ...
xserver相关知识汇总
本文主要是从以下几个方面介绍xorg-xserver 相关的知识 1.linux系统图形界面框架 2.xserver 和x client启动过程 3.图形2d,3d加速原理简介 4.xserver主 ...

【DOM相关知识汇总-学习小结】

目录