DOM文档对象模型
DOM文档对象模型
一、DOM对象分为：
a、Document对象；
b、Element对象；
c、Node对象；
二、DOM发展级别：
DOM有4个级别，分别为：
a、DOM 0 级：定义Document对象的一些属性和方法；
b、DOM 1 级；
c、DOM 2 级；
d、DOM 3 级；
注：第 0 级和第 3 级不是W3C的官方标准；
三、DOM组成：
a、Core DOM:也称核心DOM编程，定义标准针对任何结构文档的对象；
b、XML DOM:定义一套标准的针对 XML 文档的对象；
c、HTML DOM:定义一套标准的针对 XML 文档的对象；
四、DOM节点：
a、文档节点：至关于document对象；
b、元素节点：HTML标签；
c、文本节点：文本内容；
d、属性节点：标签属性；
注意：代码注释也是一种注释节点，但通常状况不作考虑。
五、判断节点类型：
a、文档节点-----nodeType值为“9”；
b、元素节点-----nodeType值为“1”；
c、属性节点-----nodeType值为“2”；
d、文本节点-----nodeType值为“3”；
1、Document对象：
一、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);
二、DOM查询方法大体可分为如下两类：
a、传统型：
getElementById-------------ID属性；
getElementsByClassName-----class属性；
getElementByTagName--------标签名；
getElementsByName----------name属性；
b、HTML5新增：
querySelector------------- CSS 选择器；
querSelectorAll----------- CSS 选择器；
三、建立节点：
a、建立元素节点：
I、经过 document 对象建立一个新的元素节点 （标签）；
语法：document.createElement(标签名)；
b、建立文本节点：
II、经过 document 对象建立一个新的文本节点（文本内容）；
语法：document.createTextNode(文本内容)；
c、建立属性节点：
III、经过 document 对象建立一个新的属性节点；
语法：document.createAttribute(属性名);
2、Node对象
一、遍历节点：
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
3、Element对象
一、Element与Node
A、经过节点访问或操做HTML页面内容：
元素节点：表示HTML页面中的标签。
属性节点：表示HTML页面中的属性。
文本节点：表示HTML页面中标签的文本内容。
B、经过元素访问或操做HTML页面内容：
元素：表示HTML页面中的标签。
I、遍历元素
一、获取父元素：
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 。
二、获取子元素：
// 获取子元素的第一个元素
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);
三、获取兄弟元素：
// 获取兄弟元素
let ad = document.getElementById("son2");
let ae = ad.previousElementSibling; /*获取兄弟元素的前一个元素*/
let af = ad.nextElementSibling; /*获取兄弟元素的后一个元素*/
console.log(ae);
console.log(af);node
- 1. 文档对象模型DOM
- 2. DOM文档对象模型
- 3. 文档对象模型（dom）
- 4. 文档对象模型 (DOM)
- 5. DOM（文档对象模型）
- 6. DOM(文档对象模型)
- 7. Dom 文档对象模型
- 8. DOM-文档对象模型
- 9. 文档对象模型（DOM）
- 10. DOM 文档对象模型
- 更多相关文章...
- • WSDL 文档 - WSDL 教程
- • XSL-FO 文档 - XSL-FO 教程
- • 委托模式
- • Kotlin学习（二）基本类型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 文档对象模型DOM
- 2. DOM文档对象模型
- 3. 文档对象模型（dom）
- 4. 文档对象模型 (DOM)
- 5. DOM（文档对象模型）
- 6. DOM(文档对象模型)
- 7. Dom 文档对象模型
- 8. DOM-文档对象模型
- 9. 文档对象模型（DOM）
- 10. DOM 文档对象模型