JS的组成
- JS语法 -->
ECMAScript
- DOM -->
Document Object Model
(文档对象模型) 可以操作html+css - BOM -->
Browser Object Model
(浏览器对象模型)
什么是DOM
- DOM是文档对象模型 ===>
Document Object Model
- DOM是由浏览器厂商定义,用来操作html和css功能的一类对象的集合。DOM也可以理解为是对HTML以及XML的标准编程接口
- DOM的结构呈树状,所以也把DOM叫做DOM树,DOM树是由很多DOM节点组成的
DOM树
DOM树
html
head body
meta title script div
span
浏览器提供了DOM(Document Object Model
)使得js可以操纵DOM树,DOM是浏览器厂商给我们提供的编程接口,就是因为有了编程接口使得js这门编程语言操纵DOM树
通过id名字获取节点
var oBox = document.getElementById("box");
console.log(oBox);
document.getElementById('box') //通过id名字获取节点
获取到HTML中的id名为box的div
的节点
基于节点树的查询操作(不经常用到)
childNodes
查询所有的子节点们
<div id="box">
<!--heaven-->
<span>heaven</span>
</div>
var oBox = document.getElementById("box");
console.log(oBox.childNodes);
firstChild
查询第一个子节点
<div id="box">香蕉
<!--heaven-->
<span>heaven</span>
</div>
var oBox = document.getElementById("box");
console.log(oBox.firstChild);
lastChild
查询最后一个子节点
<div id="box">香蕉
<!--heaven-->
<span>heaven</span>
xiangjiao
</div>
var oBox = document.getElementById("box");
console.log(oBox.lastChild);
parentNode
查询父节点
<body>
<div id="box">香蕉
<!--heaven-->
<span>heaven</span>
xiangjiao
</div>
</body>
var oBox = document.getElementById("box");
console.log(oBox.parentNode);
nextSibling
查询下面的相邻的兄弟节点
<div id="box">香蕉
<!--heaven-->
<span>heaven</span>
xiangjiao
</div>text
var oBox = document.getElementById("box");
console.log(oBox.nextSibling)
previousSibling
查询上面的相邻的兄弟节点
apple
<div id="box">香蕉
<!--heaven-->
<span>heaven</span>
xiangjiao
</div>text
var oBox = document.getElementById("box");
console.log(oBox.previousSibling);
基于元素节点树的查询操作(经常用到)
children
查询所有的元素子节点们
<div id="box">
<span>heaven</span>
<p>啦啦啦</p>
</div>
var oBox = document.getElementById("box");
console.log(oBox.children);
firstElementChild
查询第一个元素子节点
<div id="box">
<span>heaven</span>
<p>啦啦啦</p>
</div>
var oBox = document.getElementById("box");
console.log(oBox.firstElementChild);
lastElementChild
查询最后一个元素子节点
<div id="box">
<span>heaven</span>
<p>啦啦啦</p>
</div>
var oBox = document.getElementById("box");
console.log(oBox.lastElementChild);
parentElement
查询父节点
<body>
<div id="box">
<span>heaven</span>
<p>啦啦啦</p>
</div>
</body>
var oBox = document.getElementById("box");
console.log(oBox.parentElement);
nextElementSibling
查询下面的相邻的兄弟元素节点
<div id="box">
<span>heaven</span>
<p>啦啦啦</p>
</div>
<script>
</script>
var oBox = document.getElementById("box");
console.log(oBox.nextElementSibling);
previousElementSibling
查询上面的相邻的兄弟元素节点
<body>
<div id="box">
<span>heaven</span>
<p>啦啦啦</p>
</div>
</body>
var oBox = document.getElementById("box");
console.log(oBox.previousElementSibling);
DOM节点分类
节点的属性
nodeType
区分节点的类型nodeName
获取节点的名称nodeValue
获取注释节点和文本节点的内容attributes
获取元素节点的属性节点集合
如何检测节点类型nodeType
节点的分类 nodeType
文本节点 3
注释节点 8
元素节点 1
属性节点 2
文档节点(document) 9
DocumentFragment 文档片段节点 11
var oBox = document.getElementById("box");
console.log(oBox.nodeType);//是元素节点结果是1
<div id="box">海文
<!--heaven-->
<span class="on " title="我是span节点">heaven</span>
<p title="我是p节点">啦啦啦</p>
<h2>测试标题</h2>
</div>
如何遍历所有子节点children
var oBox = document.getElementById("box");
for (var i = 0; i < oBox.childNodes.length; i++) {
console.log(oBox.childNodes[i]);
}
如何遍历所有子节点类型
var oBox = document.getElementById("box");
for (var i = 0; i < oBox.childNodes.length; i++) {
console.log(oBox.childNodes[i],oBox.childNodes[i].nodeType);
}
nodeName
获取节点的名称
var oBox = document.getElementById("box");
for (var i = 0; i < oBox.childNodes.length; i++) {
console.log(oBox.childNodes[i], oBox.childNodes[i].nodeType, oBox.childNodes[i].nodeName);
}
nodeName
获取节点的名称(元素节点他的nodeName
返回结果是标签名对应的大写形式)返回结果都是字符串形式
nodeName
一般只会用来获取元素节点的属性,不可能获取到文本节点的属性
nodeValue
获取注释节点和文本节点的内容(一般不用)
var oBox = document.getElementById("box");
for (var i = 0; i < oBox.childNodes.length; i++) {
console.log(oBox.childNodes[i], oBox.childNodes[i].nodeValue);
}
attributes
获取元素节点的属性节点集合
var oBox = document.getElementById("box");
for (var i = 0; i < oBox.childNodes.length; i++) {
if (oBox.childNodes[i].nodeType === 1) {
console.log(oBox.childNodes[i],oBox.childNodes[i].attributes)
}
}
attributes
获取元素节点拿到第0项
var oBox = document.getElementById("box");
for (var i = 0; i < oBox.childNodes.length; i++) {
if (oBox.childNodes[i].nodeType === 1) {
console.log(oBox.childNodes[i].attributes[0]);
}
}
元素节点的属性在DOM树中叫做属性节点
文档节点(document)
其实DOM树的根不是html
而是document
document(DOM的根节点)
html
head body
meta title script div
span
验证html的父级是document
而document
没有父级
console.log(document.getElementById("a").parentNode)