DOM获取页面的元素

比眉伴天荒 2022-05-24 11:05 325阅读 0赞

##  1.     getElement系列访问 ##

通过DOM获取页面的元素的三种方式

Ø  getElementById( )方法访问DOM元素  —》 id获取一个元素

Ø  getElementsByName( )方法访问DOM元素—》 元素的name属性名获取(数组)

Ø  getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)

Ø  getElementsByClassName()方法访问DOM元素 –》类样式名称获取(数组)

案例演示

<table> 
 <tbody> 
 <tr> 
 <td>&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //onload事件 会等body的内容加载完后再执行 load()函数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function&nbsp; load(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //根据id获取 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var bookname=document.getElementById("book").innerHTML; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(bookname); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;//根据name属性获取--》(数组) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var seasons=&nbsp; document.getElementsByName("season"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //创建变量 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var ss=""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0;i&lt;seasons.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ss+=seasons[i].value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById("content").innerHTML=ss; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //根据标签名获取 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var contentes=""; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var inputs=&nbsp;&nbsp; document.getElementsByTagName("input"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i=0;i&lt;inputs.length;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; contentes+=inputs[i].value; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp; document.getElementById("cc").innerHTML="&lt;h1&gt;"+contentes+"&lt;/h1&gt;"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById("cc").innerText="&lt;h1&gt;"+contentes+"&lt;/h1&gt;" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; &lt;/script&gt; &lt;/head&gt; &lt;body οnlοad="load();"&gt; &lt;div class="content"&gt; &nbsp;&nbsp;&nbsp; &lt;img src="images/book.jpg" alt="岛上书店"/&gt; &nbsp;&nbsp;&nbsp; &lt;div class="r"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div id="book"&gt;书名：岛上书店&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="changeBook" value="换换名称" type="button" οnclick="alterBook();" /&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 四季名称： &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="season" type="text" value="春" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="season" type="text" value="夏" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="season" type="text" value="秋" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="season" type="text" value="冬" /&gt;&lt;br&gt;&lt;br&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="b2" type="button" value="input内容" οnclick= "all_input()" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="b3" type="button" value="四季名称" οnclick="s_input()" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input name="b4" type="button" value="清空页面内容" οnclick="clearAll()" /&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p id="replace"&gt;&lt;/p&gt; &nbsp;&nbsp;&nbsp; &lt;/div&gt; &lt;/div&gt; &lt;div id="content"&gt;&lt;/div&gt; &lt;div id="cc"&gt;&lt;/div&gt; &lt;/body&gt; &nbsp;</td> 
 </tr> 
 </tbody> 
</table>

**2.      操作节点的属性**

Ø  getAttribute("属性名")

Ø  setAttribute("属性名","属性值")

** **

**3.      操作节点样式**

Ø  style属性

Ø  className属性

HTML元素.style.样式属性＝"值"

document.getElementById("cart").style.backgroundColor="\#f9f9f9";

document.getElementById("cartList").style.display="none";

HTML元素.className="样式名称"

document.getElementById("cart").className="cartOver";

<table> 
 <tbody> 
 <tr> 
 <td>&lt;style type="text/css"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .li { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: red; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; font-size: 45px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &nbsp;&nbsp;&nbsp; &lt;li id="zhu"&gt;朱茵&lt;/li&gt; &nbsp;&nbsp;&nbsp; &lt;li&gt;马小玲&lt;/li&gt; &nbsp;&nbsp;&nbsp; &lt;li id="zz"&gt;珍珍&lt;/li&gt; &nbsp;&nbsp;&nbsp; &lt;li &gt;高圆圆&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; &lt;script&gt; &nbsp;&nbsp;&nbsp; var love = document.getElementById("zhu"); &nbsp;&nbsp;&nbsp; love.style.backgroundColor = "yellow"; &nbsp;&nbsp; var zz=document.getElementById("zz"); &nbsp;&nbsp;&nbsp; zz.className="li"; &lt;/script&gt; &nbsp;</td> 
 </tr> 
 </tbody> 
</table>