Dom模型

1.dom之对象分类

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>对象分类</title>

 </head>
 <body>
     <div id="div1">
         <div ></div>
         <p></p>
     </div>
  <script type="text/javascript">

         /*在DOM(文档对象模型中，也是一切都是对象，但是范围很小，就只有几个
             1.document object
             2.element object
             3.text object
             4.attribute object
             5.comment object
             5个对象封装到一个Node object中。node object有
             自己的节点属性：
                 attribute；nodeType;nodeName;nodeValue;innerHTML;
                     导航属性：
                         parentNode
                         firstChild
                         lastChild
                         childNodes
                         由于上面的5个属性都是封装到一个Node Object中，所以我们可以直接使用这些属性。/
         */
         var ele=document.getElementById("div1");
                     //自身属性
         console.log(ele.nodeName);
         console.log(ele.nodeType);
         console.log(ele.nodeValue);
                     //导航属性之firstChild
         var ele2=ele.firstChild;
         alert(ele2.nodeName);//#text 结果令人惊讶，原来2个div之间有一些空格，这些就是造成是文本的原因

         var ele3=ele.childNodes;
         alert(ele3.length);//5，js把空白区域当成了文本
         var parent=ele.parentNode;
         alert(parent);
     </script>
 </body>
 </html>

2.dom对象模型的根据文档树结构进行导航。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>对象分类</title>

 </head>
 <body>
     <div id="div1">
         <div ></div>
         <p></p>
     </div>
  <script type="text/javascript">

         /*在DOM(文档对象模型中，也是一切都是对象，但是范围很小，就只有几个
             1.document object
             2.element object
             3.text object
             4.attribute object
             5.comment object
             5个对象封装到一个Node object中。node object有
             自己的节点属性：
                 attribute；nodeType;nodeName;nodeValue;innerHTML;
                     导航属性：
                         parentNode
                         firstChild
                         lastChild
                         childNodes
                         由于上面的5个属性都是封装到一个Node Object中，所以我们可以直接使用这些属性。/
         */
         var ele=document.getElementById("div1");
           /*          //自身属性
         console.log(ele.nodeName);
         console.log(ele.nodeType);
         console.log(ele.nodeValue);
                     //导航属性之firstChild
         var ele2=ele.firstChild;
         alert(ele2.nodeName);//#text 结果令人惊讶，原来2个div之间有一些空格，这些就是造成是文本的原因

         var ele3=ele.childNodes;
         alert(ele3.length);//5，js把空白区域当成了文本
         var parent=ele.parentNode;
         alert(parent);*/
                     //既然firstChild不行，但是firstElementChild可以
         var ele_son=ele.firstElementChild;
         alert(ele_son.nodeName);
                     //lastElementChild
         var last=ele.lastElementChild;
         alert(last.nodeName);
                     //所有节点children
         var ele_nodes=ele.children;
         alert(ele_nodes.length);
         alert(ele_nodes[0].nodeName);

         for(var i=0;i<ele_nodes.length;i++){
                 console.log(ele_nodes[i].nodeName);
         }
                    //nextElementSibling,兄弟元素节点，记住没有空白文档

         var sib=ele.firstElementChild;
         console.log(sib.nextElementSibling.nodeName);
     </script>
 </body>
 </html>

3.全局查找和局部查找

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>查找</title>
 </head>
 <body>
     <div id="div1">hello
         <div class="div2">hello2</div>
         <div class="div3" name="lizebo">hello3
                 <p>hello inner</p>
                 <p id="p1">world innerhtml</p>
         </div>
         <p>hello,browser</p>
     </div>
     <script type="text/javascript">
                     //这里注意一下啊，这里为什么是elements,而不是element。这是有意义的，因为
                     //设计者知道以class命名元素可能有多个，而id只能有一个。
                   //1.通过id 选择器:document.getElementById();
                   //2.通过class选择器
        var ele=document.getElementsByClassName("div2");
        console.log(ele[0].nodeName);
        console.log(ele[0].innerHTML);
                     //3通过tag
        var tagnames=document.getElementsByTagName("p");
        console.log(tagnames);
        console.log(tagnames[0].innerHTML);
                     //4.通过名字,虽然用的不多，但是可以用这个
        var names=document.getElementsByName("lizebo");
        console.log(names[0].nodeName);

        /*局部去找也就是不通过document找，那么只有用element了,都差不多，这个怎么方便怎么用。*/
                     var els=document.getElementsByClassName("div3")[0];
                     var jubu=els.getElementsByTagName("p");
                     console.log(jubu[0].innerHTML);

     </script>
 </body>
 </html>