关于JavaScript -- HTML DOM之元素（节点）的获取 、操作

在了解了HTML DOM的含义和理念之后，本文就HTML DOM如何获取文档内容进行探讨。

先说说 Document 对象是什么❓

• 当浏览器载入 HTML 文档, 它就会成为 Document 对象。

• Document 对象是 HTML 文档的根节点。

• Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

• Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问，一般可以不写window.

一、获取HTML元素(节点)

访问HTML元素也是访问节点。以下总结三种获取方法：

1. 动态获取方式

以获取元素button的内容为例:

 <button class="btn" name="but" id="btn_1">按钮1</button>
 <button class="btn" name="but" id="btn_2">按钮2</button>

1）getElementById（“id”）
var dom4=document.getElementById("btn_1");

• 属于object类型，由于id值是唯一的，所以通过id获取到的元素的内容也是唯一的。

返回结果（元素内容）：

2）getElementsByTagName（“标签名”）
var dom1=document.getElementsByTagName("button")[0];

• 属于htmlcollection集合类型 ，*

3）getElementsByClassName（“类名”）

var dom2=document.getElementsByClassName("btn")[0];

• 属于htmlcollection集合类型 ，*

4）getElementsByName（“name属性值”）
var dom3=document.getElementsByName("but")[0];

• 属于NodeList （节点）集合类型，*

HTMLCollection 对象是类数组的 HTML 元素列表（集合），访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
NodeList 对象是从文档中提取的节点列表（集合），访问 NodeList 项目，只能通过它们的索引号。

• *：在文档中，同一个标签名、类名、name属性值是可以多次使用的。而操作集合得获取单个对象，因为js不能隐式迭代(单线程) ，不能操作一堆 ，只能进行单个操作，所以用索引值去获取元素。按出现的顺序用索引值从0开始排列；如果获取所有的元素集合，不会报错，但没有意义。
• 比如：2）var dom1=document.getElementsByTagName(“button”);
  

2. 固定获取方式

指定CSS选择器的一个元素：" #* " ，" .* "

1）querySelector(“指定CSS选择器的一个元素”)

仅仅获取匹配到的第一个元素

var d1=document.querySelector(".btn");

2）querySelectorAll(“指定CSS选择器的一个元素”)

获取匹配到的所有元素
var d2=document.querySelectorAll(".btn");

动态获取方式和固定获取方式有什么不同？

两者都可以用来获取HTML元素,区别在于：
1）动态获取方式：既可以获取文档中本身存在的元素，也可以获取到后期动态创建的元素内容。
2）固定获取方式：只能获取到原本文档中存在的元素，后期动态添加的元素不能直接获取。

3. 两个固定元素的获取方式(html、body)

1）console.log(document.body);

2 ） console.log(document.documentElement);

我们可以看到html、body元素具有很多属性和行为，这也是在写项目中经常会使用到的。

二、节点操作

节点属性

• nodeName 属性规定节点的名称。
  nodeName 是只读的
  元素节点的 nodeName 与标签名相同
  属性节点的 nodeName 与属性名相同
  文本节点的 nodeName 始终是 #text
  文档节点的 nodeName 始终是 #document
• nodeValue 属性规定节点的值。
  元素节点的 nodeValue 是 undefined 或 null
  文本节点的 nodeValue 是文本本身
  属性节点的 nodeValue 是属性值
• nodeType 属性返回节点的类型。
  nodeType 是只读的。
  
• parentNode 当前节点的父节点
  parentElement 当前节点的父元素
  区别：
  parentNode可以识别到根节点。
  childNodes[nodenumber] 当前元素的子节点（包含文本节点）
  children 当前元素的子元素
  区别：
  console.log(ulele.childNodes[0]);
console.log(ulele.children[0]);
  
  childElementCount 当前子元素的个数
  firstChild 第一个子节点
  firstElementChild 第一个子元素
  lastChild 最后一个子节点
  lastElementChild 最后一个子元素
  nextSibling 下一个节点同胞元素
  previousSibling 上一个节点同胞元素
  nextElementSibling 下一个同胞元素
  previousElementSibling 上一个同胞元素

三、改变 HTML 元素

1.document.write() 不要在文件加载之后写它，会覆盖前面的内容。
2.获取或设置元素html文本：innerHTML（元素内容，会解析标签）
3.获取或设置元素的文本：innerText（不会解析标签，包括子元素标签的文本内容）
4.改变属性的值：直接.属性（document.getElementById(id).attribute = new value）
5.改变 HTML 样式：document.getElementById(id).style.property = new style
注意：如果property（样式属性）不是一个单词，用驼峰式写法

//直接写
div.style="width:100px;height:200px; background-color:red; border:1px solid green;";
//单独写
div.style.border="1px solid blue";

四、添加和删除元素

1.动态创建 HTML 元素：document.createElement(element)
2.删除 HTML 元素：document.removeChild(element)
3.添加 HTML 元素：document.appendChild(element) (追加新元素作为父的最后一个子。)

  document.body.appendChild(div);

4.创建新 HTML 元素 ： insertBefore()
参数用法：
document.getElementById("myList").insertBefore(newItem,existingItem);

 <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
    </div>

   var element = document.getElementById("div1");
    var para = document.createElement("p");
    var child = document.getElementById("p1");
    element.insertBefore(para, child);

5. 替换 HTML 元素：
   document.getElementById("myList").replaceChild(newnode,oldnode);

五、设置元素属性

1.className：类名（字符串,设置一次就代表该元素的全部类）
2.classList：该属性返回元素的类名，作为 DOMTokenList 对象。该属性只读。
属性:length
方法：

add(class1, class2, …)添加类，如果存在，忽略
contains(class) 判断是否存在该类，返回值为布尔值
remove(class1, class2, …)移除类，如果不存在，不会报错
toggle(class, true|false) 切换类，第二个参数可选

3.设置属性

• 给dom元素设置自定义属性：
  btn.setAttribute("data-index",0); 参数（属性名，属性值）
  获取自定义属性
  btn.getAttribute("data-index")
• 给dom元素设置本身存在的属性：
  1）按照自定义属性的方法
  2）直接.属性（ btn.value="nicai";）

实例：过滤节点

<ul>
    <li class="lilist">元素1</li>
    <li class="lilist">元素2</li>
    <li class="lilist">元素3</li>
    <li class="lilist">元素4</li>
    <li class="lilist">元素5</li>
    <li class="lilist">元素6</li>
</ul>

 var ul = document.getElementsByTagName("ul")[0];
    // 过滤出节点type  1
       for(var i=0;i<ul.childNodes.length;i++)
       {
           if(ul.childNodes[i].nodeType==1)
           {
               console.log(ul.childNodes[i]);
           }
       }

结果：

查看：DOM方法