JS DOM节点的类型+属性+方法

什么是DOM？

DOM（Document Object Model，文档对象模型）
DOM是一套方法的集合的统称，提供了一系列方法，用来操作 html 和 xml（html和xml本质上都是一个脚本，xml是html最早的版本< xml -> xhtml -> html >，xml 和 html 唯一的不同，就是xml中的标签可以自定义），也称DOM是对html以及xml的标准编程接口。

注： 任何东西都操作不了css（意思是操作样式表，操作行内样式，实际上还是操作的html间接的操作css）

DOM节点概念

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点（document节点）
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

节点类型

元素/Element节点、属性节点、文本节点、注释节点、document节点、DocumentFragment节点

节点四大属性

1. nodeName ：节点名称，只读，元素节点的名称用大写形式的标签名表示

   <div>
   	 123 222
   	 <!-- This is commit -->
   	 <strong></strong>
   	 <span></span>
   	 <em></em>
   	 <i></i>
   	 <b></b>
   </div>
   <script>
   	 var div = document.getElementsByTagName('div')[0]
   </script>
   

   
   只可读，不可写
   

2. nodeValue：Text（文本）节点或Comment（注释）节点的文本内容，可读写

   示例代码同nodeName
   

3. nodeType：节点的类型，只读

   节点类型及其返回值
   元素节点（1）、属性节点（2）、文本节点（3）、注释节点（8）、document节点（9）、DocumentFragment节点（11）

   示例代码同nodeName
   
   nodeType运用示例：
   不使用children 实现获取元素的元素子节点

   <div>
    123 222
    <!-- This is commit -->
    <strong></strong>
    <span></span>
    <em></em>
    <i></i>
    <b></b>
   </div>
   <script>
    var div = document.getElementsByTagName('div')[0]
    function retElementChild(node){
     var temp = {//类数组
       length:0,
       push:Array.prototype.push,
       splice:Array.prototype.splice
     }
     var child = node.childNodes;
     var len = child.length;
     for(var i = 0;i < len;i ++){
       if(child[i].nodeType === 1 ){
         temp.push(child[i])
       }
     }
     return temp;
    }
   </script>
   

   

4. attributes：节点上的属性节点的集合，封装在一个类数组中

   <div class = 'dd' id = 'cc'></div>
   <script>
    var div = document.getElementsByTagName('div')[0]
   </script>
   

   

节点方法

Node.hasChildNodes() 节点内是否有子节点

 <div class = 'dd' id = 'cc'></div>
<script>
 var div = document.getElementsByTagName('div')[0]
</script>

只有当节点标签间什么东西都没有（空格都不能有）的情况下，返回false，表示节点内没有子节点

 <div class = 'dd' id = 'cc'> </div>
<script>
 var div = document.getElementsByTagName('div')[0]
</script>

节点标签内有个空格，都算是文本节点，返回true