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>