【JavaScript】节点的常用属性和方法

最新推荐文章于 2022-06-09 20:02:05 发布

言曦

最新推荐文章于 2022-06-09 20:02:05 发布

阅读量717

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/wangke1998/article/details/123042880

版权

DOM操作节点标签 getElementById getElementsByTagName

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

节点就是标签对象

方法：

1.通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点

2.appendChild(oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点。

属性：

childNodes属性，获取当前节点的所有子节点

firstChild属性，获取当前节点的第一个子节点

endChild属性，获取当前节点的最后一个子节点

parentNode属性，获取当前节点的父节点

nextSibling属性，获取当前节点的下一个节点

previousSibling属性，获取当前节点的上一个节点

className 用于获取或这只标签的class属性值

innerHTML属性，表示获取/设置其实标签和结束标签中的内容

innerText属性，表示获取/设置起始标签和结束标签中的文本

练习：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
   window.onload = function(){
      //1.查找#bj节点
      document.getElementById("btn01").onclick = function () {
            var obj=document.getElementById("bj");
            alert(obj.innerHTML);
      }
      //2.查找所有li节点
      var btn02Ele = document.getElementById("btn02");
      btn02Ele.onclick = function(){
            var obj=document.getElementsByTagName("li");
            alert(obj.length);
      };
      //3.查找name=gender的所有节点
      var btn03Ele = document.getElementById("btn03");
      btn03Ele.onclick = function(){
             var nodes=document.getElementsByName("gender");
             alert(nodes.length);
      };
      //4.查找#city下所有li节点
      var btn04Ele = document.getElementById("btn04");
      btn04Ele.onclick = function(){
            var obj=document.getElementById("city").getElementsByTagName("li");
            alert(obj.length);

      };
      //5.返回#city的所有子节点
      var btn05Ele = document.getElementById("btn05");
      btn05Ele.onclick = function(){
             var obj =document.getElementById("city").childNodes;
             alert(obj.length);
      };
      //6.返回#phone的第一个子节点
      var btn06Ele = document.getElementById("btn06");
      btn06Ele.onclick = function(){
           var obj=document.getElementById("phone").firstChild;
             alert(obj)
      };
      //7.返回#bj的父节点
      var btn07Ele = document.getElementById("btn07");
      btn07Ele.onclick = function(){
            var obj=document.getElementById("bj").parentNode;
            alert(obj);
      };
      //8.返回#android的前一个兄弟节点
      var btn08Ele = document.getElementById("btn08");
      btn08Ele.onclick = function(){
           var obj=document.getElementById("android").previousSibling;
           alert(obj);
      };
      //9.读取#username的value属性值
      var btn09Ele = document.getElementById("btn09");
      btn09Ele.onclick = function(){
            var obj=document.getElementById("username");
            alert(obj.value);
      };
      //10.设置#username的value属性值
      var btn10Ele = document.getElementById("btn10");
      btn10Ele.onclick = function(){
            var obj=document.getElementById("username");
            obj.value="123456"
            alert(obj.value);
      };
      //11.返回#bj的文本值
      var btn11Ele = document.getElementById("btn11");
      btn11Ele.onclick = function(){
            var obj=document.getElementById("bj");
            alert(obj.innerHTML);
            //alert(obj.innerText);
      };
   };
</script>
</head>
<body>
<div id="total">
   <div class="inner">
      <p>
         你喜欢哪个城市?
      </p>

      <ul id="city">
         <li id="bj">北京</li>
         <li>上海</li>
         <li>东京</li>
         <li>首尔</li>
      </ul>

      <br>
      <br>

      <p>
         你喜欢哪款单机游戏?
      </p>

      <ul id="game">
         <li id="rl">红警</li>
         <li>实况</li>
         <li>极品飞车</li>
         <li>魔兽</li>
      </ul>

      <br />
      <br />

      <p>
         你手机的操作系统是?
      </p>

      <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
   </div>

   <div class="inner">
      gender:
      <input type="radio" name="gender" value="male"/>
      Male
      <input type="radio" name="gender" value="female"/>
      Female
      <br>
      <br>
      name:
      <input type="text" name="name" id="username" value="abcde"/>
   </div>
</div>
<div id="btnList">
   <div><button id="btn01">查找#bj节点</button></div>
   <div><button id="btn02">查找所有li节点</button></div>
   <div><button id="btn03">查找name=gender的所有节点</button></div>
   <div><button id="btn04">查找#city下所有li节点</button></div>
   <div><button id="btn05">返回#city的所有子节点</button></div>
   <div><button id="btn06">返回#phone的第一个子节点</button></div>
   <div><button id="btn07">返回#bj的父节点</button></div>
   <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
   <div><button id="btn09">返回#username的value属性值</button></div>
   <div><button id="btn10">设置#username的value属性值</button></div>
   <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>