DOM操作查询

最新推荐文章于 2024-08-24 22:31:57 发布

Ward_Tian

最新推荐文章于 2024-08-24 22:31:57 发布

阅读量226

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Ward_Tian/article/details/83099698

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM查询操作</title>
</head>
<body>
   <ol >
       <li>浙江省</li>
       <li>山东省</li>
       <li>江西省</li>
   </ol>
   <ul id="city">
       <li>北京</li>
       <li>上海</li>
       <li id="gz">广州</li>
       <li>深圳</li>
       <li>杭州</li>
   </ul>
   <p>
   <input type="radio" name="sex"/>男
   <input type="radio" name="sex"/>女
   </p>
   <script>
   //1.根据id查询节点
   var ul=document.getElementById("city");
   var gz=document.getElementById("gz");
   console.log(ul);
   console.log(gz);
   //2.根据标签名查询节点
   //2.1在整个文档内查询 (document)
   console.log(document.getElementsByTagName("li"));
   //2.2在某个节点(元素)内查询(element)
   console.log(ul.getElementsByTagName("li"));
   //3.根据NAME查询节点(表单)
       var inputs=document.getElementsByName("sex");
   console.log(inputs);
   //根据层次查询节点
   //获取已得到的节点的父亲孩子兄弟
   //4.1获取父节点
   console.log(gz.parentNode);//Node:节点
   //4.2获取子节点
   console.log(ul.childNodes);//此方式获取的子节点带空格的
   //不带空格
   // ul.children 不是标准用法，
   console.log(ul.getElementsByTagName("li"));
   //4.3 标准API中没有直接查询兄弟的方法
   //必须通过查询父亲，查询孩子来实现查询兄弟。
   //e.parentNode.getElementsByTagName("")[i]
   var hz=gz.parentNode.getElementsByTagName("li")[4];//得到杭州
   console.log(hz);
   </script>
</body>
</html>