本文共 2544 字，大约阅读时间需要 8 分钟。

1.getElementsByName()方法

返回带有指定名称的节点对象的集合。

语法：document.getElementsByName(name)

注意：（1）因为文档中的name属性可能不唯一，所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

 

2.getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

语法：document.getElementByTagName(Tagname)

说明:（1）Tagname是标签的名称，如p、a、img等标签吗

（2）和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

 

3.程序

            
                               
   
              请选择你爱好:
    
          
      音乐          
      登山          
      游泳          
      阅读          
      打球          
      跑步 
    
          
              
              
    
请输入您要选择爱好的序号，序号为1-6:
          
              
            
   
            

4.getAttribute()方法

通过元素节点的属性名称获取属性的值。

语法：elementNode.getAttribute(name)

说明：（1）elementNode：使用getELementById()、getElementByTagName()等方法，获取到的元素节点。

（2）name:要想查询的元素节点的属性名字。

 

5.setAttribute()方法

setAttribute()方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：elementNode.setAttribute(name,value);

说明：name:要设置的属性名  value：要设置的属性值

 

6.节点属性

在文档对象属性（DOM）中，每个节点都是一个对象，DOM节点有三个重要属性：nodeName：节点名称  nodeValue：节点的值 nodeType：节点的类型

（1）nodeName属性：节点的名称，是只读的。

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 是属性的名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document

（2）nodeValue()属性：节点的值

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本自身 属性节点的 nodeValue 是属性的值

（3）nodeType类型

元素类型    节点类型

  元素          1   属性          2   文本          3   注释          8   文档          9

 

7.访问子节点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组它具有length属性。

 

8.访问子节点的第一和最后项

（1）firstChild属性返回‘childNodes’数组的第一个节点

语法：node.firstChild

（2）lastChild属性返回‘childNodes’数组的最后一个子节点。

语法：node.lastChild

 

9.访问父节点parentNode

获取指定节点的父节点

语法：elementNode.parentNode

注意：父节点只能有一个

 

10.访问兄弟节点

（1）nextSibling 属性可返回某个节点之后紧跟的节点

语法：nodeObject.nextSibling

（2）previousSibling属性可返回某个节点之前紧跟的节点

语法：nodeObject.previousSibling

 

11.插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点

语法：appendChild(newnode)

往UL标签添加一个新项PHP

<script type="text/javascript">

  var otest = document.getElementById("test");  

  var newcode=document.createElement("li");

  newcode.innerHTML="PHP";

  otest.appendChild(newcode);          

</script>

 

12.插入节点insertBefore()

insertBefore()方法可在已有的子节点钱插入一个新的子节点。

语法：insertBefore(newnode,node);

参数：newnode：要插入的新节点 node:指定此节点前插入的节点

 

13.删除节点removeChild()

removeChild()方法从子节点列表中删除某个节点。如删除成功，则此方法可返回被删除的节点，如失败，则返回NULL.

语法：nodeObject.removeChild(node)

 

13.替换元素节点replaceChild()

replaceChild实现子节点的替换，返回被替换对象的引用。

语法：node.replaceChild(newcode,oldnew);

 

14.创建元素节点createElement

createElement()方法可创建元素节点， 此方法可返回一个Element对象。

语法：document.createElement(tagName)

15.创建文本节点createTextNode

createTextNode()方法创建新的文本节点，返回新创建的Text节点。

语法：document.createTextNode(data)

转载地址：https://codingchaozhang.blog.csdn.net/article/details/77532904 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！