前言：
DOM是javascript操作网页的接口，全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，本节主要讨论的是JS中的节点问题，主要对其中的三种进行描述。学完本节后可以任意的在页面中获取和设置HTML中的标签！
Loading……
节点的5种样式
首先，我们来区分一下节点的类型。在JavaScript中包含了5种不同的节点样式，分别为元素节点、属性节点、文本节点、注释节点和文档节点。在程序中，我们可以通过NodeValue（节点值）、NodeType（节点类型）和NodeName（节点名）来区分这五种不同的节点。下图自上而下就包含了文档节点，元素节点，属性节点，文本节点。
节点.PNG
| 节点类型 | NodeValue | NodeType | NodeName |
|---|---|---|---|
| 文档节点(Document) | 只读，返回null | 9 | 返回 #document |
| 元素节点(Element) | 只读，返回null | 1 | 返回 大写元素名称 |
| 属性节点(Attr) | 获取或设置属性的值 | 2 | 返回 属性名称 |
| 文本节点(Text) | 获取或设置文本的值 | 3 | 返回 #text |
获取HTML元素节点方法
文档节点、元素节点可以通过getElementById、getElementsByClassName、getElementsByTagName和getElementsByName获取。
1.根据id值获取元素节点
var jsDivId = document.getElementById("idDiv");
2.根据class值获取元素节点 （数组）
var jsDivsClass = document.getElementsByClassName("classDiv");
/*for(var i in jsDivsClass){
console.log(jsDivsClass[i]);
}*/
for (var i = 0; i < jsDivsClass.length; i++) {
console.log(jsDivsClass[i]);
}
注意：使用for - in 会打印非数字的数组
3.根据标签名获取元素节点 （数组）
var jsDivTagName = document.getElementsByTagName("div");
for (var j = 0; j < jsDivTagName.length; j++) {
console.log(jsDivTagName[j]);
}
4.根据name属性值获取元素节点 （数组）
var jsDivsName = document.getElementsByName("inputText");
for (var m = 0; m < jsDivsName.length; m++) {
console.log(jsDivsName[m]);
}
获取与设置HTML属性节点
1.获取与设置官方定义的属性节点
获取：元素节点.属性名
<body>
<input type="text" id="in" placeholder="Hello World" my="我的">
<script type="text/javascript">
var jsInput = document.getElementById("in");
console.log(jsInput.placeholder); //打印出Hello World
</script>
</body>
设置：元素节点.属性名 = 新的属性值
设置前.PNG
jsInput.type = "button";
设置后此时，input的类型就变为button
设置后
2.获取与设置自定义的属性节点
获取：元素节点.getAttribute(属性名)
console.log(jsInput.getAttribute("my")); //打印"我"
设置：元素节点.setAttribute(属性名，新属性值）
jsInput.setAttribute("my","OK");
console.log(jsInput.getAttribute("my")); //此时，打印"OK"
注意：当属性名不存在时，会变成添加属性与属性值
3.获取文本节点
3.1 元素节点.innerHTML
获取到的是元素开始标签到结束标签之间所有内容，不包含HTML标签本身
<div id="box">
我是个盒子
</div>
<script type="text/javascript">
var jsDiv = document.getElementById("box");
console.log("*"+jsDiv.innerHTML+"*");
</script>
innerHTML.PNG
so strange！为啥打印出来的是这样的呢？不是只打印出“我是个盒子”！？为啥还有空格的？一脸懵逼！
原来，在jsDiv.innerHTML中，它会打印出所有存在于jsDiv中的内容！注意，是所有内容。因此它会将div标签的换行也打印出来了，要想只打印出“我是个盒子”，就将其与div标签连起来写。
3.2 元素节点.outerHTML
获取到的是innerHTML以外，还包含了HTML本身。
console.log(jsDiv.outerHTML);
outerHTML.PNG
这里就连<div>标签也打印出来了！这就是outerHTML
3.3 元素节点.innerText
获取到的是开始标签到结束标签之前的所有文本内容
console.log(jsDiv.innerText);
未完待续
Loading...
网友评论