JS：document 和 element 浅谈

一、简介

DOM 对象：DOM（DOM—Document Object Model）是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。
打开网页后，首先看到的是浏览器窗口，即顶层的window对象，而网页内容就是document对象，其中document是window的一个对象属性，所以document可全局访问。DOM对象共有7种，这里浅谈下其中的HTML DOM Document 文件对象和HTML DOM Element元素对象。

二、辨析关系

DOM对象的继承关系：
在这里插入图片描述
在 HTML DOM (Document Object Model)中，每一个元素都是节点：
文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。
注释是注释节点。
我对于document和element的关系的理解：DOM HTML可以理解为一个节点树，从根元素一直往下面延申，所有对HTML内容的操作都是以节点为单位的。当我们对一个html里面标签进行操作时，首先需要通过document对象获取对应的element对象（貌似都叫元素对象），之后就是通过element对象来操作标签内容。所以我们需要先知道这两个对象各有什么属性和方法。

三、属性和方法

Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
这里总结一点常用的方法和属性：
1、利用Document对象的方法获取操作的元素
document.getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName() 返回带有指定名称的对象集合。
document.getElementsByTagName() 返回带有指定标签名的对象集合。
document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素

<body>
    <div id="box">box</div>
    <div class="bar">bar</div>
    <div name="main">main</div>
    <script>
      console.log(document.getElementById('box'));            // 获取id为box的元素
      console.log(document.getElementsByClassName('bar'));    // 获取所有class为bar的元素
      console.log(document.getElementsByTagName('div'));      // 获取所有标签为div的元素
      console.log(document.getElementsByName('main'));        // 获取所有name为main的元素
    </script>
    <script>
      var box = document.getElementById('box');               // 根据id获取元素对象
      var divs = document.getElementsByTagName('div');        // 根据标签名获取对象集合
      console.log(divs[0] === box);                           // 输出结果：true
    </script>
    <script>
      console.log(document.querySelector('div'));             // 获取匹配到的第1个div
      console.log(document.querySelector('#box'));            // 获取id为box的第1个元素
      console.log(document.querySelector('.bar'));            // 获取class为bar的第1个元素
      console.log(document.querySelector('div[name]'));       // 获取含有name属性的第1个div
      console.log(document.querySelector('div.bar'));         // 获取文档中class为bar的第1个div
      console.log(document.querySelector('div#box'));         // 获取文档中id为box的第1个div
    </script>
  </body>

2、利用Document对象的属性获取操作的元素
document.body 返回文档的body元素
document.documentElement 返回文档的根节点
document.forms 返回对文档中所有 Form 对象引用。
document.images 返回对文档中所有 Image 对象引用。

<body>
    <script>
      var body = document.getElementsByTagName('body')[0];    // 获取body元素
      var html = document.getElementsByTagName('html')[0];    // 获取html元素
      console.log(document.body === body);                    // 比较返回结果，输出结果：true
      console.log(document.documentElement === html);         // 比较返回结果，输出结果：true
    </script>
  </body>

3、利用Document对象的属性获取文档信息
document.referrer 返回载入当前文档的文档的 URL。
document.title 返回当前文档的标题。
document.URL 返回文档完整的URL
document.domain 返回当前文档的域名。

4、利用Document对象的方法操作文档
document.write() 向文档写 HTML 表达式或 JavaScript 代码。
document.writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
document.open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。

<html>
<head>
<meta charset="utf-8">
<title>教程</title>
<script>
function createDoc(){
    var doc=document.open("text/html","replace");
    var txt="<!DOCTYPE html><html><body>学习 HTML DOM 很有趣!</body></html>";
    doc.write(txt);
    doc.close();
}
</script>
</head>
<body>
<input type="button" value="新文档" onclick="createDoc()">
</body>
</html>

注意close方法必须和open方法配套使用

元素对象

在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象的子节点可以是, 可以是元素节点，文本节点，注释节点。
NodeList 对象代表了节点列表，类似于 HTML元素的子节点集合。
元素可以有属性。属性属于属性节点（属性对象没怎么直接使用，不讲）。

1、利用Element对象获取某个元素内的指定元素
element.getElementsByTagName() 返回指定标签名的所有子元素集合。
element. getElementsByClassName() 返回文档中所有指定类名的元素集合，作为 NodeList 对象。
element.children 返回元素的子元素的集合

<ul id="ul">
  <li>PHP</li><li>JavaScript</li>
  <ul><li>jQuery</li></ul>
</ul>
<li id="test" name="test">test</li>
<script>
  var lis = document.getElementById('ul').getElementsByTagName('li');
  console.log(lis);    // 输出结果：(3) [li, li, li]
</script>

<script>
  var lis = document.getElementById('ul').children;
  console.log(lis);    // 输出结果：(3) [li, li, ul]
</script>
<script>
  var lis1 = document.getElementsByTagName('li');    // 获取标签名为li的对象集合
  console.log(lis1[0]);								 // 输出<li>PHP</li>
  var test = document.getElementById('test');        // 获取id为test的li元素对象
  console.log(lis1.test === test);                   // 比较结果：true
  var lis2 = document.getElementsByName('test');     // 获取name名为test的对象集合
  console.log(lis1.test === lis2[0]);                // 比较结果：true
</script>

2、利用Element对象的属性获取元素内容
element.textContent 设置或返回一个节点和它的文本内容
element.innerHTML 设置或者返回元素的内容。

<html>
  <head><meta charset="UTF-8"></head>
  <body>
    <div id="box">
      The first paragraph...
      <p>
        The second  paragraph...
        <a href="http://www.example.com">third</a>
      </p></div>
    <script>
      var box = document.getElementById('box');
      console.log(box.innerHTML);
      console.log(box.textContent);
    </script>
  </body>
</html>

注意：innerHTML会保持格式和标签样式，textContent会去掉标签保持格式

3、利用Element对象修改元素属性
element.attributes 返回一个元素的属性数组
element.getAttribute() 返回指定元素的属性值
element.setAttribute() 设置或者改变指定属性并指定值。
element.removeAttribute() 从元素中删除指定的属性

<html>
  <head>
    <meta charset="UTF-8">
    <title>元素属性操作</title>
    <style>
      .gray{background: #CCC;}
      #thick{font-weight: bolder;}
    </style>
  </head>
  <body>
    <div>test word.</div>
    <script>
      // 获取div元素
      var ele = document.getElementsByTagName('div')[0];
      // ① 输出当前ele的属性个数
      console.log('未操作前属性个数：' + ele.attributes.length);
      // ② 为ele添加属性，并查看属性个数
      ele.setAttribute('align', 'center');
      ele.setAttribute('title', '测试文字');
      ele.setAttribute('class', 'gray');
      ele.setAttribute('id', 'thick');
      ele.setAttribute('style', 'font-size:24px;border:1px solid green;');
      console.log('添加属性后的属性个数：' + ele.attributes.length);
      // ③ 获取ele的style属性值
      console.log('获取style属性值：' + ele.getAttribute('style'));
      // ④ 删除ele的style属性，并查看剩余属性情况
      ele.removeAttribute('style');
      console.log('查看所有属性：');
      for (var i = 0; i < ele.attributes.length; ++i) {
        console.log(ele.attributes[i]);
      }
	  console.log(ele.attributes.id.value);
    </script>
  </body>
</html>

注意：可以这样写：ele.style.backgroundColor = ‘red’;

4、利用Element对象的classList属性
element.classList 返回元素的类名，作为 DOMTokenList 对象。

<html>
  <head>
    <meta charset="UTF-8">
    <title>classList的使用</title>
    <style>
      .bg{background:#ccc;}
      .strong{font-size:24px;color:red;}
      .smooth{height:30px;width:120px;border-radius:10px;}
    </style>
  </head>
  <body>
    <ul>
      <li>PHP</li>
      <li class="bg">JavaScript</li>
      <li>C++</li>
      <li>Java</li>
    </ul>
    <script>
      // 获取第2个li元素
      var ele = document.getElementsByTagName('li')[1];
      // 若li元素中没有strong类，则添加
      if (!ele.classList.contains('strong')) {
        ele.classList.add('strong');
      }
      // 若li元素中没有smooth类，则添加；若有删除
      ele.classList.toggle('smooth');
      console.log('添加与切换样式后：');
      console.log(ele);
    </script>
    <script>
      console.log('删除后：');
	  ele.classList.remove('bg');
      console.log(ele);
	  console.log(ele.classList.item(1));
    </script>
  </body>
</html>

上面的各种操作是以HTML元素为单位，就是标签。下面把这些标签看成节点树，以节点为单位操作。
实际上HTML元素和DOM节点是一个东西，只不过看法不同。

5、利用Element对象的属性获取节点
element.firstChild 返回元素的第一个子节点
element.lastChild 返回的最后一个子节点
element.nodeName 返回元素的标记名（大写）
element.nodeValue 返回元素的节点值
element.nextSibling 返回该元素紧跟的一个节点
element.previousSibling 返回某个元素紧接之前元素
element.childNodes 返回元素的一个子节点的数组
element.parentNode 返回元素的父节点

<script>
      // 访问document节点的第1个子节点
      console.log(document.firstChild);                // 访问结果：<!DOCTYPE html>
      // 访问document节点的第2个子节点
      console.log(document.firstChild.nextSibling);    // 访问结果：<html>……</html>
</script>
注意：document在某种程度上也可看成节点

利用各种方法追加节点	
document.createAttribute()	创建一个属性节点
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
element.appendChild()	为元素添加一个新的子元素
element.insertBefore()	现有的子元素之前插入一个新的子元素
element.getAttributeNode()	返回指定属性节点
element.setAttributeNode()	设置或者改变指定属性节点。
  <body>
    <script>
      var h2 = document.createElement('h2');                     // 创建h2元素节点
      var text = document.createTextNode('Hello JavaScript');    // 创建文本节点
      var attr = document.createAttribute('align');              // 创建属性节点
      attr.value = 'center';                                     // 为属性节点赋值
      h2.setAttributeNode(attr);                                 // 为h2元素添加属性节点
      h2.appendChild(text);                                      // 为h2元素添加文本节点
      document.body.appendChild(h2);                             // 将h2节点追加为body元素的子节点
      console.log(document.getElementsByTagName('h2')[0]);
    </script>
  </body>

6、利用各种方法删除节点
element.removeAttributeNode() 删除指定属性节点并返回移除后的节点。
element.removeChild() 删除一个子元素

<body>
    <ul>
      <li>PHP</li><li>JavaScript</li><li class="strong">UI</li>
    </ul>
    <script>
      var child = document.getElementsByTagName('li')[2];    // 获取第3个li元素
      var attr = child.getAttributeNode('class');            // 获取元素的class属性值
      console.log(child.removeAttributeNode(attr));          // 删除元素的class属性值
      console.log(child.parentNode.removeChild(child));      // 删除元素
    </script>
  </body>

四、总结

以上是对元素（节点）各种常用操作的总结，也都有示例，主要难点在于document和element有时会让人很混乱，不知道谁是谁的属性或者方法，主要还是要搞懂先用document获取到元素，然后在各种操作。