## 1.1 DOM概述
DOM： 文档对象模型，当网页文档加载到浏览器内存时，浏览器会为文档生成一个对应的文档对象，
同时会解析这个文档中的所有内容，所有的成分都是一个节点，每个节点都是一个对象。
DOM 是这样规定的：
- 整个文档是一个文档节点
- 每个 XML 标签是一个元素节点
- 包含在 XML 元素中的文本是文本节点
- 每一个 XML 属性是一个属性节点
- 注释属于注释节点
补充：
XML文档： 可扩展标记语言， 这种文档以标签来描述数据的，而且可以自定义标签
HTML文档： 超文本标记语言，它是XML的子集，不能自定义标签
## 1.2 节点树
DOM文档会被浏览器解析为一个节点树，节点之间有等级关系：
父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。
- 在节点树中，顶端的节点成为根节点
- 根节点之内的每个节点都有一个父节点
- 节点可以有任何数量的子节点
- 叶子是没有子节点的节点
- 同级节点是拥有相同父节点的节点
## 1.3 访问节点
XML DOM：HTMLCollection getElementsByTagName() 根据标签的名称可以获取到DOM节点集合，HTML DOM 继承了
每个节点都是Node的对象，每个节点对象都有nodeName、nodeValue、nodeType属性
<body>
<ul>
<li>水浒传</li>
</ul>
<script type="text/javascript">
// 创建一个新的元素节点li
// createElement('元素名称') 创建新的元素节点
var newLi = document.createElement('li');
newLi.innerHTML = '<span>西游记</span>';
newLi.setAttribute('id', 'li2');
var ulEle = document.getElementsByTagName('ul')[0];
ulEle.appendChild(newLi);
</script>
</body>元素节点的三个属性的值是什么：
访问方式： document.getElementsByTagName parentNode firstChild lastChild childNodes
nodeName: 标签名
nodeType: 1
nodeValue： null
属性节点的三个属性的值是什么：
访问方式： 元素节点.getAttribute("属性名称")
nodeName: 属性名称
nodeType: 2
nodeValue： 属性的值
文本节点的三个属性的值是什么：
访问方式： 元素节点.textContent(文本内容) 、 firstChild
nodeName: #text 固定
nodeType: 3
nodeValue： 文本内容本身
注释节点：
访问方式：
nodeName: #comment 固定
nodeType: 8
nodeValue： null
文档节点的三个属性的值是什么：
访问方式： document 对象
nodeName: #document 固定的
nodeType: 9
nodeValue： null
<body>
<ul id="books">
<li>天龙八部</li>
</ul>
<script type="text/javascript">
var newLi = document.createElement('li');
// 设置文本
newLi.innerHTML = '倚天屠龙记';
// 获取ul
var ulEle = document.querySelector('#books');
var firstLi = ulEle.firstElementChild;
// replaceChild(新的节点, 旧的节点)
ulEle.replaceChild(newLi, firstLi);
// 追加节点
// ulEle.appendChild(newLi);
// // firstChild获取第一个子节点
// ulEle.removeChild(firstLi);
</script>
</body>## 1.4 HTML DOM 常用属性和方法
Node节点对象
Element元素节点对象
Attr属性节点对象
元素节点 textContent属性可以设置或获取纯文本内容，HTML标签不会被浏览器解析
createElement('元素名称') 创建元素节点 这个方法继承自XML DOM
appendChild(新的元素节点) 在某个元素节点内最后添加新的节点对象
innerHTML属性： 设置或获取元素节点的文本内容，HTML标签会被浏览器解析
getElementById()： 根据元素的Id获取元素对象
getElementsByClassName() : 根据元素的class属性的值（类名）获取一组元素节点对象
getElementsByTagName() : 根据标签名称获取一组元素节点对象
getElementsByName() : 根据标签的name属性的值获取一组元素节点对象
firstChild: 获取某个元素的第一个子节点
replaceChild(新的节点, 旧的节点) : 用新的节点替换老节点
ES6提供了新的API
querySelector(’选择器‘) ： 根据指定的选择器获取第一个元素节点对象
querySelectorAll('选择器') ： 根据指定的选择器获取匹配的所有节点对象
### 1.5 DOM提供的9大内置对象
Array内置对象：
数组对象1.concat(数组对象2) ： 拼接数组并返回拼接后的新数组
数组对象.join('连接符号') : 将数组的元素用指定的连接字符串进行拼接，并返回拼接后的字符串
数组对象.pop() : 删除并返回数组的最后一个元素
数组对象.push(数据) : 向数组的末尾添加一个或更多元素，并返回新的长度
数组对象.reverse() : 颠倒数组中元素的顺序。
数组对象.shift() : 删除并返回数组的第一个元素
数组对象.unshift() : 向数组的开头添加一个或更多元素，并返回新的长度
数组对象.slice() : 可从已有的数组中返回选定的元素。
数组对象.splice() : 可以删除元素和添加元素
数组对象.sort()： 对数组的数据进行排序
标签：内置,DOM,对象,元素,数组,节点,属性 来源： https://blog.csdn.net/m0_62356365/article/details/123643621
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。