js-Dom

Dom中的基本组成被称为元素节点。
一、
节点的分类：1、元素节点 2文本节点 3属性节点。
获取元素：
   1 document.getElementById（id）利用id来获取元素节点。（id是具有唯一性。返回的只有一个对象）
   2 document.getElementsByTagName(tag)利用节点标签的名字来获取元素节点。（以对象数组形式输出，可用".length"来求取元素节点的个数。）
   3 document.getElementsByClassName(class) 利用标签中class来获取元素节点。（以对象数组的形式输出可以使用".length"的方法来求取元素节点的个数。）
   获取和设置属性
   1 object（对象）.getAttribute(属性名)
   2 object（对象）.setAttribute(属性名，改变的属性值)
   上述讲解了关于js_Dom的基本操作，以下举例说明其具体用法。
   例:

<!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8" />
      <title></title>
      </head>
      <body>
        <h1>What do you want to by</h1>
        <p title="a gentle reminder">Don't forget to buy this stuff.</p>
        <ul id="purchases">
         <li>A tin of beans</li>
         <li class="sale">Cheese</li>
         <li class="sale important">Milk</lil>
        </ul> 
      </body>
      </htnl>

alert(document.getElementById("purchases"))
输出结果为：

 
         <ul id="purchases">
         <li>A tin of beans</li>
         <li class="sale">Cheese</li>
         <li class="sale important">Milk</lil>
        </ul>

alert(document.getElementsByTagName("li"))
输出结果为：

         <li>A tin of beans</li>
         <li class="sale">Cheese</li>
         <li class="sale important">Milk</lil>

alert(document.getElementsByClassName("sale"))

 
         <li class="sale">Cheese</li>
         <li class="sale important">Milk</lil>

    alert(document.getElementsByTagName("p").getAttribute("title"))
输出结果为："a gentle reminder"。
    document.getElementsByTagName("p").setAttribute("title","AAA")
    alert(document.getElementsByTagName("p").getAttribute("title"))
输出结果为："AAA"
    alert(document.getElementsByTagName("li").length)
输出结果为 3 .
    alert(document.getElementsByClassName("sale"))
输出结果为 "sale" "sale important"
    alert(document.getElementsByClassName("sale").length)
输出结果为 2 。

猜你喜欢