Part4-DOM学习笔记-获取元素属性及节点操作

本文主要是介绍Part4-DOM学习笔记-获取元素属性及节点操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

6.获取元素属性

6.1 获取元素属性

获取元素的属性有两种方式：

element.属性：
- 获取内置属性值，元素本身自带的属性
- 不能获取自定义属性
- 代码示例如
```
console.log(div.id)
```
element.getAttribute(‘属性’)：
- 可以获取内置属性值
- 可以获取自定义属性
- 代码示例如下：
```
console.log(div.getAttribute('id'))
```

6.2设置属性值

设置属性值有两种方式：

element.属性=“值”：
element.setAttribute(“属性”,“值”)：

6.3 移除属性

element.removeAttribute(‘属性’)

6.4 tab切换案例

如下代码是实现tab切换的案例完整的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.tab{width: 800px;height: 300px;/* background-color: aqua; */margin: 0 auto;margin-top: 100px;}.tab-lst{clear: both;border-bottom: 2px solid rgb(133, 70, 167);height: 30px;background-color: rgb(227, 226, 229);}.tab-lst li{float: left;display: block;height: 30px;line-height: 30px;width: 120px;text-align: center;font-size: 16px;cursor: pointer;/* background-color: blue; */}.item{height: 300px;background-color: #ebeaea;display: none;}.tab-lst-bg{background-color:rgb(133, 70, 167);color: #fff;}.con-show{display: block;}</style>
</head>
<body><div class="tab"><div class="tab-lst"><ul><li class="tab-lst-bg">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价</li><li>手机社区</li></ul></div><div class="tab-content"><div class="item con-show">商品介绍模块内容</div><div class="item">规格与包装模块内容</div><div class="item">售后保障模块内容</div><div class="item">商品评价模块内容</div><div class="item">手机社区模块内容</div></div></div><script>// 1.上面的选项卡，点击某一个，当前背景颜色为紫色，其他的为灰色，排他思想// 获取元素let tab_lst = document.querySelector('.tab-lst');let lis = tab_lst.querySelectorAll('li');let items = document.querySelector('.tab-content').querySelectorAll('.item')// for循环绑定点击事件for (let i = 0; i < lis.length; i++){lis[i].onclick = function(){// 排他思想，先给所有元素设置clasName为空for(let i = 0; i < lis.length; i++){lis[i].className = '';items[i].className = 'item';}// 设定自己的classNamethis.className = 'tab-lst-bg';items[i].className = "item con-show";};}</script>
</body>
</html>

效果如下：

注意：上面的实现效果是按照自己理解来写的代码，教程中用的是在js中给每个li设置index自定义属性，然后再获取index值，再通过index值来设置item的display属性，我觉得那个有一点繁琐，所以没放在这里。另外这个效果也可以通过CSS来实现。

6.5 H5自定义属性

自定义属性的目的：是为了保持并使用数据，有些数据可以保存在页面中而不用保存到数据库中。

通过getAttribute(“属性”)获取

但是有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性，因此H5给自定义属性设置了规范

h5规定自定义属性以**data-**开头作为属性名

h5获取自定义属性用**document.dataget.属性获取属性值，其中document.dateget**获取的是所有的自定义属性的对象

如果定义属性有多个**-连接，那么获取的时候需要采用驼峰命名法。例如自定义属性为data-name-index,那么获取的时候需要用dataget.nameIndex**

7.节点操作

7.1 获取元素的两种方式

利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementByTagName()
- document.querySelector等等
- 逻辑性不强，繁琐
利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强，但是兼容性稍差

7.2 节点概述

网页中的所有内容都是节点（标签、属性、文本、概述），在DOM中节点使用node来表示。

HTMl DOM树中的所有节点均可通过js进行访问，所有的html元素（节点）均可被修改，也可以创建或删除。

一般节点至少拥有nodeType(节点类型)、**nodeName（节点名称）和nodeValue(节点值)**三个基本属性。

**元素节点：**nodeType 为 1，主要操作元素节点
属性节点：nodeType 为 2
文本节点：nodeType 为 3 （文本节点包含文字、空格、换行等）

7.3 节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

获取父级节点：
- 用node**.parentNode**获取父节点，
- 得到是离它最近的节点，不会获取祖节点；
- 如果找不到，返回为 null
- 代码示例，如下代码是先获取了元素，为了实现某个效果，需要操作它的父元素，按照之前的方式需要把父元素也要获取过来，不过现在有有的节点操作，可以直接用node**.parentNode**来获取父元素。
```
<body><div class="outer"><button>点我关闭</button></div><script>let btn = document.querySelector('button');btn.onclick = function(){console.log(btn.parentNode)}</script>
</body>
```
  控制台输出结果为：
获取子节点
- 用parentNode**.childNodes**获取子节点
  - 得到是所有的子节点，包括元素节点、文本节点（如空格、换行等）等等。
  - 如果只想要获得里面的元素节点，则需要专门处理，所以一般不使用node**.childNodes**。
- 用parentNode**.children**获取子元素节点
  - 是一个只读属性，返回所有的子元素节点。
  - 它只返回子元素节点，其余节点不返回。
  - 实际开发常用的。
```
<body><div class="outer">        <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>    <script>let ul = document.querySelector('ul');console.log(ul.children)</script>
</body>
```
- 获取第一个子节点parentNode**.firstChild**，获取最后一个子节点用parentNode**.lastChild**
  - 获取的是第一个或最后一个子节点，不管是元素还是文本
- 获取第一个子元素节点parentNode**.firstElementChild**,获取最后一个子元素节点用parentNode**.lastElementChild**
  - 获取的是第一个或最后一个子元素节点
  - 找不到则返回null

7.4 下拉菜单案例

要实现的是新浪网页面中的效果，如下动图所示。

实现以上效果，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}a,li{text-decoration:none;text-indent:0;list-style: none;color: #252525;font: 16px 微软雅黑;cursor: pointer;}.outer{background-color: #e1e1e1;height: 40px;}.nav{display: block;height: 40px;width: 300px;clear: both;margin: 0 auto;/* background-color: aqua; */}.nav>li,a{height: 40px;line-height: 40px;width: 100px;float: left;text-align: center;cursor: pointer;position: relative;}.nav a:hover,.nav ul li:hover{background-color: #b5b5b5;color: #f3ec6a;}.nav ul {position: absolute;top:40px;left: 0;width: 100%;border-left: 2px solid #f3ec6a;border-right: 2px solid #f3ec6a;box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.2);display: none;}.nav ul li{border-bottom: 2px solid #f3ec6a;}</style>
</head>
<body><div class="outer"><ul class="nav"><li><a href="#">微博</a><ul><li>私信</li><li>评论</li><li>@我</li></ul></li><li><a href="#">博客</a><ul><li>博客评论</li><li>未读评论</li></ul></li><li><a href="#">邮箱</a><ul><li>免费邮箱</li><li>VIP邮箱</li><li>企业邮箱</li><li>注册邮箱</li></ul></li></ul></div><script>// 获取元素let nav = document.querySelector('.nav');// 获取li标签let lis = nav.children;// 循环注册事件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 = "none";}}</script>
</body>
</html>

运行效果如下：

7.5 兄弟节点

兄弟节点可以通过以下代码获取

节点名	语法	备注
获取下一个兄弟节点	node.nextSibling	包含元素节点、文本节点、属性节点等等
获取上一个兄弟节点	node.previousSibling	包含元素节点、文本节点、属性节点等等
获取下一个兄弟元素节点	node.nextElementSibling	返回当前元素的下一个兄弟元素节点，找不则返回null
获取上一个兄弟元素节点	node.previousElementSibling	返回当前元素的上一个兄弟元素节点，找不则返回null

7.6 节点操作

名称	语法	说明
创建节点	document.createElement(‘tagName’)	该方法创建由tagName指定的HTML元素，这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点	node.appendChild(添加的元素)	node是父节点，child 是子节点在后面追加元素，类似数组中的push
插入节点	node.insertBefore(插入的元素,指定元素)	在指定元素前面插入元素，两个参数是必须的。
删除节点	node.removeChild(child)	node是父节点，child 是子节点从DOM中删除一个子节点，返回删除的节点
复制节点	node.cloneNode(node)	返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

7.7 留言板案例

案例效果如下所示

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单发布留言板</title><style>.outer{width: 500px;margin: 50px auto;}.inner{text-align: right;}textarea{width: 500px;height: 200px;margin: 10px 0;box-sizing: border-box;}ul{list-style: none;padding: 0;margin: 0}li{border-bottom: 1px solid #000;margin-top: 5px;clear: both;}li a{float: right;}</style>
</head>
<body><div class="outer"><div class="inner"><textarea name="" id="" ></textarea><input type="submit" value="发布"></div><ul><!-- <li>评论内容</li> --></ul></div><script>// 获取元素var text = document.querySelector('textarea');var btn = document.querySelector('input');var ul = document.querySelector('ul');// 点击发布按钮btn.onclick = function(){if(text.value == ''){alert('请输入内容');return;}else{// 获取文本框的内容var content = text.value;// 创建li元素var li = document.createElement('li');// 将文本框的内容添加到li中,同时添加删除按钮，'javascript:;'阻止链接跳转li.innerHTML = content + ' <a href="javascript:;">删除</a>';// 将li添加到ul中ul.insertBefore(li,ul.children[0]);// 清空文本框text.value = '';// 删除功能var a = document.querySelectorAll('a');for(var i = 0; i < a.length; i++){// 给每个a添加点击事件a[i].onclick = function(){// 删除当前a的父元素ul.removeChild(this.parentNode);}}}}</script>
</body>
</html>

上面案例的核心思路是：

1.点击按钮之后，就会动态创建一个li，添加到ul里面

2.创建li的同时，把文本域立面的值通过li.innerHTML赋值给li并且添加删除按钮

3.如果想要新的留言在后面显示就用appendChild,如果想要在前面显示就用insertBefore

4.给删除按钮添加事件，点击删除它的父元素，也就是li元素

7.8 动态生成表格案例

案例效果如下：

表格中的数据是动态获取的，页面中的表格元素均由js创建，完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态生成表格案例</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}tbody tr {height: 30px;}</style>
</head>
<body><table><thead><tr><td>姓名</td><td>科目</td><td>成绩</td><td>操作</td></tr></thead><tbody></tbody></table><script>// 1.先模拟从服务器获取到的数据var datas = [{name: '张三',subject: 'javascript',score: 100},{name: '李四',subject: 'javascript',score: 98},{name: '王五',subject: 'javascript',score: 99},{name: '赵六',subject: 'javascript',score: 88}];// 2.获取tbody元素var tbody = document.querySelector('tbody');for (let i = 0; i < datas.length; i++) {// 3.创建行let tr = document.createElement('tr');tbody.appendChild(tr);// 4.创建单元格,单元格的数量取决于属性个数for (let k in datas[i]) {let td = document.createElement('td');tr.appendChild(td);// 5.单元格的内容取决于属性值td.innerHTML = datas[i][k];}// 6.创建删除按钮let td = document.createElement('td');td.innerHTML = '<a href="javascript:;">删除</a>';tr.appendChild(td);// 7.为删除按钮添加点击事件let a = td.children[0];a.onclick = function () {tbody.removeChild(tr);}}</script>
</body>
</html>

7.9 动态创建元素的区别

语法	说明
document.write()	直接将内容写入页面的内容流，但是文档流执行完毕后，页面会全部重绘，这个方法不常用
element.innerHTML	将内容写入摸个DOM节点，不会导致页面全部重绘创建多个元素效率更高（不要拼接字符串，采取数组的形式拼接），结构稍微复杂
createElement()	创建多个元素效率稍微低一点点，但是结构更清晰

8.DOM重点核心总结

文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、样式。

在DOM中把整个页面划分为一个由文档、元素、节点组成的树形结构。
- **文档：**一个页面就是一个文档，DOM中使用document表示。
- **元素：**页面中所有的标签都是元素，DOM中使用element表示。
- **节点：**网页中的所有内容都是节点（标签、属性、文本、注释等）,DOM中使用node表示。
关于dom操作，我们主要针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作。

	语法	说明
创建	1.document.write()
创建	2.element.innerHTML
创建	3.createElement()
增	1.appendChild	在后面添加
增	2.insertBefore	在前面添加
删	3.removeChild
改	1.src\href\title等	修改元素属性
改	2.innerHTML\innerText	修改普通元素内容
改	3.value\type\disable等	修改表单元素
改	4.style\className	修改元素样式
查	1.getElementById\getElementByTagName	DOM提供的API方法，用法古老不推荐
查	2.querySelector\querySelectorAll	H5提供的新方法，推荐
查	3.父(parentNode)、子(children)、兄(previousElementSibiling\nextElementSibing)	利用节点操作获取元素，推荐
属性操作	1.setAttribute	设置dom的属性值
属性操作	2.getAttribute	获取dom的属性值
属性操作	3.removeAtribute	移除属性

事件操作，主要是鼠标事件，具体如下表

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发