标签：返回 DOM 元素 HTML HTML5 document 节点
DOM结构
DOM 采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。
<html>
<head>
<title><title>
<meta charset="utf-8" />
</head>
<body>
<h1>C语言中文网</h1>
<p>C语言中文网一个……</p>
<p>C语言中文网成立于……</p>
</body>
</html>
对于上面这个 HTML 文档，DOM 将其解析为图 1 所示的树形结构。
图 1：DOM 树
于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
- 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
- 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
- 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
- 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和
document.getElementsByTagName()，以及CSS选择器
document.getElementsByClassName()。
由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。
document.getElementsByTagName()和
document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。
例如：
// 返回ID为'test'的节点：
var test = document.getElementById('test');
// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;
第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：
// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');
注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。
严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。
练习
如下的HTML结构
<!-- HTML结构 -->
<div id="test-div">
<div class="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div class="c-red c-green">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div class="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div>
请选择出指定条件的节点：
'use strict';
// 测试:
if (!js || js.innerText !== 'JavaScript') {
alert('选择JavaScript失败!');
} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {
console.log('选择Python,Ruby,Swift失败!');
} else if (!haskell || haskell.innerText !== 'Haskell') {
console.log('选择Haskell失败!');
} else {
console.log('测试通过!');
}DOM
文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口
它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容
任何 HTML或XML文档都可以用 DOM表示为一个由节点构成的层级结构
节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系，如下所示：
<html>
<head>
<title>Page</title>
</head>
<body>
<p>Hello World!</p >
</body>
</html>DOM像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：
<div>
<p title="title">
content
</p >
</div>上述结构中，div、p就是元素节点，content就是文本节点，title就是属性节点
操作
日常前端开发，我们都离不开DOM操作
在以前，我们使用Jquery，zepto等库来操作DOM，之后在vue，Angular，React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM
但这并不代表原生操作不重要。相反，DOM操作才能有助于我们理解框架深层的内容
下面就来分析DOM常见的操作，主要分为：
- 创建节点
- 查询节点
- 更新节点
- 添加节点
- 删除节点
创建节点
// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")
// 创建一个文本节点；
document.createTextNode(String);
// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");createElement
创建新元素，接受一个参数，即要创建元素的标签名
const divEl = document.createElement("div");createTextNode
创建一个文本节点
const textEl = document.createTextNode("content");createDocumentFragment
用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中
const fragment = document.createDocumentFragment();当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment自身，而是它的所有子孙节点
createAttribute
创建属性节点，可以是自定义属性
const dataAttribute = document.createAttribute('custom');
consle.log(dataAttribute);获取节点
获取节点
// 通过id号来获取元素，返回一个元素对象
document.getElementById(idName)
// 通过name属性获取id号，返回元素对象数组
document.getElementsByName(name)
// 通过class来获取元素，返回元素对象数组
document.getElementsByClassName(className)
// 通过标签名获取元素，返回元素对象数组
document.getElementsByTagName(tagName)
//不需要兼容IE
document.querySelector('#idxxx')
document.querySelectorAll('.red')[0]
document.querySelectorAll('#idxxx')[0]querySelector
传入任何有效的css 选择器，即可选中单个 DOM元素（首个）：
document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')如果页面上没有指定的元素时，返回 null
querySelectorAll
返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表
const notLive = document.querySelectorAll("p");需要注意的是，该方法返回的是一个 NodeList的静态实例，它是一个静态的“快照”，而非“实时”的查询
关于获取DOM元素的方法还有如下，就不一一述说
document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素
document.documentElement; 获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all['']; 获取页面中的所有元素节点的对象集合型
除此之外，每个DOM元素还有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling属性，关系图如下图所示
更新节点
innerHTML
不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
// 获取<p id="p">...</p >
var p = document.getElementById('p');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p">ABC</p >
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的内部结构已修改
innerText、textContent
自动对字符串进行HTML编码，保证无法设置任何HTML标签
// 获取<p id="p-id">...</p >
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p >两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本
style
DOM节点的style属性对应所有的CSS，可以直接获取或设置。遇到-需要转化为驼峰命名
// 获取<p id="p-id">...</p >
const p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px'; // 驼峰命名
p.style.paddingTop = '2em';添加节点
// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")
// 创建一个文本节点；
document.createTextNode(String);
// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");
// 往element内部最后面添加一个节点，参数是节点类型
element.appendChild(Node);
// 在element内部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode); 获取当前元素的同级元素
// 返回当前元素的下一个同级元素 没有就返回null
element.nextSibling
// 返回当前元素上一个同级元素 没有就返回 null
element.previousSibling获取当前元素的文本
// 返回元素的所有文本，包括html代码
element.innerHTML
// 返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
element.innerText获取当前节点的节点类型
// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType
设置样式
// 设置元素的样式时使用style
element.style.color=“#eea”;
innerHTML
如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于添加了新的DOM节点
如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点
appendChild
把一个子节点添加到父节点的最后一个子节点
举个例子
<!-- HTML结构 -->
<p id="js">JavaScript</p >
<div id="list">
<p id="java">Java</p >
<p id="python">Python</p >
<p id="scheme">Scheme</p >
</div>
添加一个p元素
const js = document.getElementById('js')
js.innerHTML = "JavaScript"
const list = document.getElementById('list');
list.appendChild(js);现在HTML结构变成了下面
<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p >
<p id="python">Python</p >
<p id="scheme">Scheme</p >
<p id="js">JavaScript</p > <!-- 添加元素 -->
</div>上述代码中，我们是获取DOM元素后再进行添加操作，这个js节点是已经存在当前文档树中，因此这个节点首先会从原先的位置删除，再插入到新的位置
如果动态添加新的节点，则先创建一个新的节点，然后插入到指定的位置
const list = document.getElementById('list'),
const haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);insertBefore
把子节点插入到指定的位置，使用方法如下：
parentElement.insertBefore(newElement, referenceElement)子节点会插入到referenceElement之前
setAttribute
// 括号传入属性名，返回对应属性的属性值
element.getAttribute(attributeName)
// 传入属性名及设置的值
element.setAttribute(attributeName,attributeValue)在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值
const div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值。
删除节点
删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉
// 拿到待删除节点:
const self = document.getElementById('to-be-removed');
// 拿到父节点:
const parent = self.parentElement;
// 删除:
const removed = parent.removeChild(self);
removed === self; // true
删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置
标签：返回,DOM,元素,HTML,HTML5,document,节点 来源： https://www.cnblogs.com/tianyu2018/p/16458652.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。