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

javascript

JS_dom查询节点

發布時間：2025/3/21 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS_dom查询节点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.οnlοad=function(){
//1.根據ID查詢節點
//2.根據標簽名查詢節點
//3.根據層次查詢節點
// 查詢某個節點的親戚(父親，孩子，兄弟)
//1)查詢父親
var gz=document.getElementById("gz");
var ul=gz.parentNode;
console.log(gz.parentNode);
//2)查詢孩子
//包含空格（了解即可）
console.log(ul.childNodes);
//只含元素(重點掌握)
console.log(ul.getElementsByTagName("li"));
//3)查詢兄弟
//某節點.父親.孩子們[i]
var tj=gz.parentNode.getElementsByTagName("li");
console.log(tj);
//4.根據name查詢節點
//一般用于查詢一組單選/多選
var radios=document.getElementsByName("sex");
console.log(radios);
}
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">廣州</li>
<li>深圳</li>
<li>天津</li>
<li>重慶</li>
</ul>
<p>
<input type="radio" name="sex" >男
<input type="radio" name="sex" >女
</p>
</body>
</html>

轉載于:https://www.cnblogs.com/Bighua123/p/7635964.html

總結

以上是生活随笔為你收集整理的JS_dom查询节点的全部內容，希望文章能夠幫你解決所遇到的問題。

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