DOM文档对象模型
Posted 毁梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM文档对象模型相关的知识，希望对你有一定的参考价值。
DOM文档对象模型
1、DOM对象分为：
a、Document对象；
b、Element对象；
c、Node对象；
2、DOM发展级别：
DOM有4个级别，分别为：
a、DOM 0 级：定义Document对象的一些属性和方法；
b、DOM 1 级；
c、DOM 2 级；
d、DOM 3 级；
注：第 0 级和第 3 级不是W3C的官方标准；
3、DOM组成：
a、Core DOM:也称核心DOM编程，定义标准针对任何结构文档的对象；
b、XML DOM:定义一套标准的针对 XML 文档的对象；
c、html DOM:定义一套标准的针对 XML 文档的对象；
4、DOM节点：
a、文档节点：相当于document对象；
b、元素节点：HTML标签；
c、文本节点：文本内容；
d、属性节点：标签属性；
注意：代码注释也是一种注释节点，但一般情况不做考虑。
5、判断节点类型：
a、文档节点-----nodeType值为“9”；
b、元素节点-----nodeType值为“1”；
c、属性节点-----nodeType值为“2”；
d、文本节点-----nodeType值为“3”；
一、Document对象：
1、DOM 查询 （获取元素节点）
A、通过标签的 id 属性值获取：
语法：let num = document.getElementById(id属性)；
输出：console.log(num);
B、通过标签的 class 属性值获取：
语法：let num = document.getElementsByClassName(class属性)；
输出：console.log(num[xx]);
class获取的元素结果是一个数组形式，所以具体到某一位需要通过数组的下标[xx]去获取。
C、通过标签名获取：
语法：let num = document.getElementByTagName(标签名)；
输出：console.log(num[xx]);
标签名获取的元素结果是一个数组形式，所以具体到某一位需要通过数组的下标[xx]去获取。
D、通过标签的 name 属性值获取：
语法：let num = document.getElementsByName(name属性值);
输出：console.log(num[0]);
name属性值获取的元素结果是一个数组形式，所以具体到某一位需要通过数组的下标[xx]去获取。
E、通过 CSS 选择器方式获取：
返回第一个选择器匹配的 HTML 页面元素；
语法：let num = document.querySelector(选择属性)；
输出：console.log(num);
F、通过 CSS 选择器方式获取：
返回全部选择器匹配的 HTML 页面元素；
语法：let num = document.querSelectorAll(选择属性)；
输出：console.log(num);
2、DOM查询方法大致可分为以下两类：
a、传统型：
getElementById-------------ID属性；
getElementsByClassName-----class属性；
getElementByTagName--------标签名；
getElementsByName----------name属性；
b、HTML5新增：
querySelector------------- CSS 选择器；
querSelectorAll----------- CSS 选择器；
3、创建节点：
a、创建元素节点：
I、通过 document 对象创建一个新的元素节点 （标签）；
语法：document.createElement(标签名)；
b、创建文本节点：
II、通过 document 对象创建一个新的文本节点（文本内容）；
语法：document.createTextNode(文本内容)；
c、创建属性节点：
III、通过 document 对象创建一个新的属性节点；
语法：document.createAttribute(属性名);
二、Node对象
1、遍历节点：
a、获取父节点：(parentNode)
通过 HTML 页面的指定标签查找其父节点。
语法：子节点.parentNode
例：
<div id="father">
<div id="son"></div>
</div>
let num = document.getElementById("son");
let sum = num.parentNode;
console.log(sum);
b、获取子节点：(firstChild)
通过 HTML 页面的指定标签查找其子节点。
语法：父节点.firstChild
注意：获取指定标签的第一子节点；
例：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
</div>
var num = document.getElementById("father");
var sum = num.firstChild;
console.log( sum );
语法：父节点.lastChild;
注意：获取指定标签的最后一个子节点；
例：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
</div>
var num = document.getElementById("father");
var sum = num.lastChild;
console.log( sum );
语法：父节点.childNodes;
注意：获取指定标签的所有子节点；
例：
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
<div id="son3"></div>
</div>
var num = document.getElementById("father");
var sum = num.childNodes;
console.log( sum );
c、获取兄弟节点：
通过 HTML 页面的指定标签查找兄弟节点：
语法：兄弟节点.previousSibling;
注意：previousSibling----获取指定节点的前一个兄弟节点。
例：
<div id="brother1"></div>
<div id="brother2"></div>
<div id="brother3"></div>
var num = document.getElementById("brother2");
var sum = num.previousSibling;
console.log( sum );
console.log( sum.previousSibling );
注意：nextSibling----获取指定节点的最后一个兄弟节点。
例：
<div id="brother1"></div>
<div id="brother2"></div>
<div id="brother3"></div>
var num = document.getElementById("brother2");
var sum = num.nextSibling;
console.log( sum );
console.log( sum.nextSibling );
d、插入节点：
I、appendChild():将一个节点作为最后一个子元素添加到指定父节点。
语法：父节点.appendChild(子节点)；
例：
let num = document.createElement("div");
document.body.appendChild( num );
II、insertBefore() ：在父节点的某个已有的子节点之前再插?入一个子节点。
语法：父节点.insertBefore(新子节点，旧子节点)；
例：
let num = document.createElement("div"); // 创建 div
document.body.appendChild( num ); // 将其插?入到 body 的末尾
let sum = document.createElement("a"); // 创建 a
document.body.insertBefore( sum, num ); // 将其插?入到 div 之前
e、删除节点：
removeChild()
语法：父节点.removeChild（子节点）；
例：
<div id="father">
<div id="son"></div>
</div>
var father = document.getElementById("father"); // 获取?父节点
var son = document.getElementById("son"); // 获取?子节点
father.removeChild( son ); // 删除子节点
f、替换节点：
replaceChild()；
语法：父节点.replaceChild(新子节点，旧子节点)；
例：
<div id="father">
<div id="son"></div>
</div>
var father = document.getElementById("father"); // 获取?父节点
var son = document.getElementById("son"); // 获取已有?子节点
var newChild = document.createElement("p"); // 创建新节点
father.replaceChild( newChild, son ); // 新节点替换已有旧?子节点
g、复制节点：
cloneNode();
语法：选中节点.cloneNode(布尔值true/false)；
注意：如果为true则该节点后面所有子节点也会被复制；如果为false则只复制该节点本身。
例：
<div id="father">
<div id="son"></div>
</div>
var father = document.getElementById("father"); // 获取节点
var newFather = father.cloneNode( true ); // 复制已获取节点
document.body.appendChild( newFather ); // 将复制好的新节点添加到 body
三、Element对象
1、Element与Node
A、通过节点访问或操作HTML页面内容：
元素节点：表示HTML页面中的标签。
属性节点：表示HTML页面中的属性。
文本节点：表示HTML页面中标签的文本内容。
B、通过元素访问或操作HTML页面内容：
元素：表示HTML页面中的标签。
I、遍历元素
1、获取父元素：
parentElement;
语法：子元素.parentElement
例、
<div id="father">
<div id="son"></div>
</div>
let sonEle = document.getElementById("son");
let fatherEle = son.parentElement;
console.log( fatherEle );
注意：
“Node 对象”的 parentNode 和“Element 对象”的 parentElement 两个?方法都可以?用来获取?级，但是有区别：
parentNode 表示获取指定元素的?节点。这个?节点可能是元素节点，也可能是?文档节点。
parentElement 表示获取指定元素的?元素节点。该元素没有?节点，或者它的?父节点不是?个元素节点，则返回 null 。
2、获取子元素：
// 获取子元素的第一个元素
let fatherEle = document.getElementById("father");
let aa = fatherEle.firstElementChild; /*获取子元素的第一个元素*/
let ab = fatherEle.lastElementChild; /*获取子元素的最后一个元素*/
let ac = fatherEle.children; /*获取子元素中的所有元素*/
console.log(aa);
console.log(ab);
console.log(ac);
3、获取兄弟元素：
// 获取兄弟元素
let ad = document.getElementById("son2");
let ae = ad.previousElementSibling; /*获取兄弟元素的前一个元素*/
let af = ad.nextElementSibling; /*获取兄弟元素的后一个元素*/
console.log(ae);
console.log(af);
以上是关于DOM文档对象模型的主要内容，如果未能解决你的问题，请参考以下文章