JS高级篇----节点(上)

前言：

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...

JS高级篇----节点(上)