DOM对象控制HTML无素—

DOM对象控制HTML无素——详解1

getElementsByName()方法

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

语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

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

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

1 <body>
2       <p name="pn">getElementsByName</p>
3       <p name="pn">getElementsByName</p>
4       <p name="pn">getElementsByName</p>
5       <p name="pn">getElementsByName</p>
6       <script>
7           var pn = document.getElementsByName("pn")[0].innerHTML = "new"
8       </script>
9 </body>

getElementsByTagName()方法

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

语法:

getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称，如p、a、img等标签名。

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

1 <body>
2       <p>getElementsByTagName</p>
3       <p>getElementsByTagName</p>
4       <p>getElementsByTagName</p>
5       <p>getElementsByTagName</p>
6       <script>
7           var tagName = document.getElementsByTagName("p")[0].innerHTML = "new"
8       </script>
9 </body>

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

1 <body>
2       <p id="pid" name="pn">tagname,id,name</p>
3       <script>
4           var tagName = document.getElementsByTagName("p")[0].innerHTML
5           var name = document.getElementsByName("pn")[0].innerHTML
6           var id = document.getElementById("pid").innerHTML
7           document.write(tagName+" "+name+" "+id)
8       </script>
9 </body>

getAttribute()方法

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

语法：

elementNode.getAttribute(name)

说明:

1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

1 <body>
2            <a href="www.baidu.com" id="aid"></a>
3            <script>
4                var a = document.getElementById("aid")
5                var getattr = a.getAttribute("href")
6                alert(getattr)
7            </script>
8 </body>

setAttribute()方法

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

语法：

elementNode.setAttribute(name,value)

说明：

1.name: 要设置的属性名。

2.value: 要设置的属性值。

注意：

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

 1 <body>
 2            <a href="www.baidu.com" id="aid"></a>
 3            <script>
 4                var a = document.getElementById("aid")
 5                var setattr1 = a.setAttribute("href","www.google.com")
 6                var getattr1 = a.getAttribute("href")
 7                alert(getattr1)
 8                var setattr2 = a.setAttribute("title","这是第二种设置属性节点")
 9                var getattr2 = a.getAttribute("title")
10                alert(getattr2)
11            </script>
12 </body>