day-2.3 获取文档对象的方法

一、获取文档对象的方法的概念

js是一门web前端语言，主要作用就是为了操作web文档，web文档是以节点标记区分各个元素去构成的，各个元素根据不同的属性值，展示出不同的效果。

所以js操作web文档，其实就是操作web文档的各个元素的属性。既然要操作文档元素的属性，就先要获取元素。

DOM为JS提供了各文档的获取API，在JS里面，html 文档里面每一个节点元素都是一个对象。JS可以通过指定的API去获取之后直接进行操作，或者赋值给变量再进行操作。

DOM的元素对象和 JS里面其他的对象不同于，元素对象的产生根据html文档的文档结构产生，即文档结构里，有这个DIV，当内置JS编译器的浏览器加载后，编译环境里面就生成了一个对应的元素对象。

并不是由JS去创造的，JS只是通过dom提供的api去获取这个元素对象而已。

二、获取元素对象的API都有哪些

特殊标签获取：

1 var document.documentElement,  //获取html
2       body = document.body ,    //获取body
3       head = document.head ,   //获取head
4       title = document.title;  //获取title

 

一般标签获取：一般标签又分为静态标签和动态标签

静态态标签获取：

静态获取的意思是当变量获取元素对象后，元素对象的内存位置就存在了变量对应的栈中，直接通过变量栈中存的内存地址进行读取，不会每次引用都获取一遍。

也就是说静态获取返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。

1 document.getElementById();
2 document.querySelector();
3 document.querySelectors();

举例：

a获取文档对象后，即使获取的条件是ID，ID值修改后，扔可以通过变量a指向到文档对象对title属性值进行修改，最终将修改值复写入标签属性title里面。

复制代码
1 <body>
2     <div id="wrap"></div>
3     <script>
4         var a = document.getElementById("wrap");
5         a.id = "haha"
6         a.title = "修改ID后，由变量引用对象进行title修改。"
7     </script>
8 </body>
复制代码

动态标签获取：

所谓动态标签的意思是当变量引用元素对象后，每次通过变量去引用元素对象的时候，变量都会按照获取的方法函数重新获取一遍。

也就是说动态获取返回的结果是动态的，之后对document结构的改变会影响到之前取到的结果。

动态获取的方法：

1 document.getElementByTagName();
2 document.getElementByName();
3 document.getElementsByClassName();

举例：

<body>
    <p class="haha">1</p>    //class="oo"
    <p class="haha">1</p>    //class="ee"
    <p class="haha">1</p>   
    <script>
        var aP = document.getElementByClassName("haha");
              aP[0].className = "oo" ;  //原伪数组里面的值是 3个P标签，所以对aP[0]修改的时候是修改第一个P标签的class
              ap[0].className = "ee" ;  //第一个P标签修改后，现伪数组里只有2个P标签了，所以对aP[0]修改的时候其实修改的是第二个P标签
    </script>
</body>

 动态获取的特殊情况：

当动态获取的伪数组某个对象的值再另外一个变量建立引用关系之后，无论这个数组如何变化，都不会影响已经建立引用关系的变量对元素对象的引用。

例子：

即使ap[0]不是第一个p标签了，obj还是第一个P标签，引用关系不因为aP数组变化而发生变化。

 1 <body>
 2      <p class="haha">1</p>    //class="oo" ,里面内容修改为123123;
 3      <p class="haha">1</p>    //里面内容修改为heheheh;
 4      <p class="haha">1</p>   
 5      <script>
 6          var aP = document.getElementByClassName("haha");
 7          var obj = ap[0];
 8                ap[0].className = "oo";
 9                ap[0].innerText = "heheheh";  
10                obj.innerText = "123123" ;  
11      </script>
12 </body>

 

posted @ 2018-05-18 14:36  bibiguo  阅读(218)  评论(0)    收藏  举报