當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript之document对象获取元素

發布時間：2023/12/16 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript之document对象获取元素小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

document對象

概述：瀏覽器對外提供的支持js操作HTML文檔的一種對象，這個對象封裝了HTML文檔中的所有對象。當HTML文檔一執行，就會創鍵document對象，把HTML文檔中的所有信息封裝到document對象中，我們要獲取HTML文檔中的信息，只需要操作document這個對象即可。

獲取元素屬性，兩種方式
直接獲取

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>document對象</title><style type="text/css">input{width: 100px;height: 50px;border-radius: 5px;background-color: #008000;color: white;}</style></head><body><input type="button" name="LD" id="" value="獲取元素id" onclick="testGetId()"/> <hr ><input type="button" name="LD" id="" value="獲取name" onclick="testGetName()"/> <hr ><input type="button" name="" id="" value="獲取標簽" onclick="testGetTagname()"/> <hr ><input type="button" name="" id="" value="獲取類名" onclick="testClassNames()"/> <hr ><div id="uname"></div><div class="LED"></div><input type="checkbox" name="val" id="" value="" />唱<input type="checkbox" name="val" id="" value="" />跳<input type="checkbox" name="val" id="" value="" />rap<input type="checkbox" name="val" id="" value="" />打籃球<input type="checkbox" name="val" id="" value="" />扭秧歌<input type="checkbox" name="val" id="" value="" />二人轉</body><script type="text/javascript" src="../js/documentObject.js"></script> </html>

js代碼

/*獲取元素id*/ function testGetId(){var id = document.getElementById("uname");alert(id); } /*獲取元素名稱*/ function testGetName(){var names = document.getElementsByName("LD");alert(names); } /*獲取標簽名*/ function testGetTagname(){var tagNames = document.getElementsByTagName("input");alert(tagNames); } /*獲取類名*/ function testClassNames(){var classNames = document.getElementsByClassName("LED");alert(classNames); }

結果：

間接獲取
1、父子關系
2、子父關系
3、兄弟關系

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>document對象</title><style type="text/css">input{width: 100px;height: 50px;border-radius: 5px;background-color: #008000;color: white;}</style></head><body> <input type="button" name="" id="" value="測試父子關系" onclick="testParentToSon()"/> <hr ><input type="button" name="" id="" value="測試子父關系" onclick="testSonToParent()"/> <hr ><input type="button" name="" id="" value="測試兄弟關系" onclick="testBrother()"/> <hr ><div id="uname"><div id="creazy"><p id="pp"></p><p></p><p></p><p></p><p></p></div><div id="bor"></div><div id="hello"></div></div><div class="LED"></div></body><script type="text/javascript" src="../js/documentObject.js"></script> </html>

js代碼

/*父子關系*/ function testParentToSon(){//現獲取元素ID對象var id = document.getElementById("uname");var childs = id.childNodes;alert(childs.length); } /*子父關系*/ function testSonToParent(){//現獲取元素ID對象var id = document.getElementById("pp");var childs = id.parentNode;alert(childs); } /*兄弟關系*/ function testBrother(){//現獲取元素ID對象var bor = document.getElementById("bor");var gg = bor.previousElementSibling;var dd = bor.nextElementSibling;alert(gg+":"+dd); }

總結

以上是生活随笔為你收集整理的JavaScript之document对象获取元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：无论用手工处理还是用计算机进行处理,会计
下一篇： python3实例（一）平方根