5个常用的DOM方法 (js dom编程艺术之第3章)

本文链接：https://blog.csdn.net/ziyun0923/article/details/52493659

3.4节点

3.4.5获取元素

1.getElementById

2.getElementsByTagName

原代码

<pre name="code" class="html"><body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this stuff.</p>
	<p>This is just a test</p>
    <ul id="purchases">
      <li>A tin of beans</li>
      <li>Cheese</li>
      <li>Milk</li>
    </ul>
</body>

<span style="white-space:pre">	</span>alert(docunment,getElementsByTagName("li").length);

结果：3

如果想知道文档里共有多少个元素，用通配符“*”

var shopping=document.getElementsById("purchase");
var items=shopping.getElementByTagName("*");
alert(items.length);

结果：3

3.getElementsByclassName(与2.有相似，将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点）

3.5 获取和设置属性

3.5.1getAttribute

</pre><pre name="code" class="html">var paras = document.getElementsByTagName("p");
	for (var i=0; i< paras.length; i++) {<pre name="code" class="html"><span style="white-space:pre">	var title_text=paras[i].getAttribute("title");
<span style="white-space:pre">		</span>if(title_text) alert(title_text);
<span style="white-space:pre">			</span>}</span>

结果：弹出对话框"a gentle reminder

3.5.2 getAttribute


var shopping=document.getElementById("purcyhases");
	alert(shopping.getAttribute("title"));
	shopping.setAttribute("title","a list of goods");
	alert(shopping.getAttribute("title"));

结果：弹出两个alert对话框，第一个“null”;第二个"a list of goods"