方法

访问方法

访问元素节点

—————————————————

getAttributes()【返回指定元素的属性值】

getAttributeNode() 方法返回指定属性名的属性值。

element.getAttribute(attributename)

参数 类型 描述
attributename String 必须。你想返回的属性名。

返回值

类型 描述
String 指定属性的值。

演示:

  1. 简化代码
  2. <body>
  3. <div id="box" class="small"></div>
  4. <script>
  5. var box = document.getElementById('box');
  6. var n = box.getAttribute('class');
  7. alert(n);
  8. </script>
  9. </body>

1.png

setAttribute()【设置或者改变指定属性并指定值】

element.setAttribute(attributename,attributevalue)

参数 类型 描述
attributename String 必须。你要添加的属性名称。
attributevalue String 必须。你要添加的属性值。

没有返回值。


setAttribute() 方法创建或改变某个新属性。
如果指定属性已经存在,则只设置该值。

演示:

  1. 简化代码
  2. <body>
  3. <input value="OK">
  4. <p id="demo">点击下面的按钮来设置按钮的类型属性。</p>
  5. <button onclick="myFunction()">点我</button>
  6. <script>
  7. function myFunction(){
  8. document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
  9. };
  10. </script>
  11. <p>Internet Explorer 8 及更早的版本不支持 setAttribute 方法。</p>
  12. </body>

1.gif

—————————————————

appendChild()【为元素添加一个新的子元素】

前置知识引用
node(节点)
node.appendChild(node)

参数 类型 描述
node 节点对象 必须。你要添加的节点对象。

返回值

类型 描述
节点对象 添加的节点

3.png
演示:

简化代码
<body> 
    <p id="demo">单击按钮创建button元素</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        var btn=document.createElement("BUTTON");
        document.body.appendChild(btn);
    };
    </script>
</body>

1.gif

insertBefore()【现有的子元素之前插入一个新的子元素】

node.insertBefore(newnode,existingnode)

参数 类型 描述
newnode 节点对象 必须。要插入的节点对象
existingnode 节点对象 必须。要添加新的节点前的子节点。

返回值

类型 描述
节点对象 你插入的节点/td>

4.png
演示:

简化代码
<body> 
    <ul id="myList"><li>Coffee</li><li>Tea</li></ul>
    <p id="demo">单击按钮插入一个项目列表</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        var newItem=document.createElement("LI")
        var textnode=document.createTextNode("Water")
        newItem.appendChild(textnode)
        var list=document.getElementById("myList")
        list.insertBefore(newItem,list.childNodes[0]);
    }
    </script>
    <p><strong>注意:</strong><br>首先创建一个li节点,<br>然后创建一个文本节点,<br>然后添加文本节点的在li节点。<br>最后在第一个子节点列表插入li节点。</p>
</body>

1.gif

移动

简化代码
<body> 
    <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
    <ul id="myList2"><li>Water</li><li>Milk</li></ul>
    <p id="demo">单击按钮将项目从一个列表移动到另一个列表中</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        var node=document.getElementById("myList2").lastChild;
        document.getElementById("myList1").appendChild(node);
    }
    </script>
</body>

1.gif

—————————————————

removeChild()【删除一个子节点】

node.removeChild(node)

参数 类型 描述
node 节点对象 必须。 你要移除的节点对象。

返回值

类型 描述
节点对象 移除的节点

演示:

<body> 
    <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
    <p id="demo">单击按钮移除列表的第一项</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        var list=document.getElementById("myList");
        list.removeChild(list.childNodes[0]);
    }
    </script>
</body>

1.gif

—————————————————

cloneNode()【克隆一个节点】

node.cloneNode(deep)

参数 类型 描述
deep Boolean 可选。该方法将复制并返回调用它的节点的副本。如果传递给它的参数是 true,它还将递归复制当前节点的所有子孙节点。否则,它只复制当前节点。

返回值

类型 描述
节点对象 拷贝的节点

演示:

<body> 
    <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
    <ul id="myList2"><li>Water</li><li>Milk</li></ul>

    <p id="demo">单击按钮将项目从一个列表复制到另一个列表中</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
        var itm=document.getElementById("myList2").lastChild;
        var cln=itm.cloneNode(false);
        document.getElementById("myList1").appendChild(cln);
    }
    </script>
    <p>尝试更改<em>deep</em>参数为假,只有一个空的li元素将被克隆</p>
</body>

1.gif