JavaScript关于获取节点与获取元素的一些简单了解

脚踏实地，坚持不懈!

于 2022-08-16 19:15:29 发布

阅读量308

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43228946/article/details/126372107

版权

#JavaScript关于获取节点。
我们一般在获取元素的时候，采用的方法有以下几种方法：
（1）document.getElementById():通过id来获取。
（2）document.getElementsByTagName():返回拥有指定标签名的所有子元素的集合。如果集合里面只有一个元素的话，那么就写成这样document.getElementsByTagName()[0]
（3）getElementsByName() ：方法可返回带有指定名称的对象的集合。
其中使用最多的是第一种document.getElementById()。
现在获取兄弟节点：
previousSibling：获取前一个节点，如果在同一行的两个标签在中间回车换行，那么下面的标签获取到的前一个元素是文本类型的节点。
nextSibling：获取后面的兄弟节点，基本和上面的用法差不多。
parentNode：获取父节点
firstChild：获取元素的第一个孩子节点
innerHTML：设置或返回元素的内容。
innerText：返回或者设置元素的文本内容

<!DOCTYPE html>
<html lang="en">

<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>案例027</title>
</head>

<body>
                  <div>
                                    <button id="btn">请点击按钮</button>

                  </div>
                  <ul id="zhan_guo">
                                    <li id="qin">秦国</li><li id="chu">楚国</li><li id="zhao">赵国</li>
                                    <li>齐国</li>
                                    <li id="yan">燕国</li>
                                    <li>韩国</li>
                                    <li>魏国</li>
                  </ul>
                  用户(username):
                  <input type="text" name="name" id="username" value="我是天下第一的聪明幸运" />
                  <button id="textSet">设置文本内容</button>
                  <button id="textGet">获取文本内容</button>
                  <script>
                                    function myOnlick(idStr, fun) {
                                                      var btn = document.getElementById(idStr);
                                                      btn.onclick = fun;
                                    }
                                    myOnlick("btn", function () {
                                                      //alert("已经点击了按钮");
                                                      var pn = document.getElementById("btn").parentNode;
                                                      var htmlStr = pn.innerHTML;
                                                      var htmlText = pn.innerText;
                                                      alert(htmlStr);
                                                      alert(htmlText);
                                    });
                                    /*
                                        寻找兄弟节点
                                    */
                                    //获取上一个兄弟节点
                                    var chu = document.getElementById("chu");
                                    var qin = chu.previousSibling;
                                    console.log(qin.innerText);
                                    //获取下一个兄弟节点
                                    var zhao = chu.nextSibling;
                                    console.log("楚国的下一个兄弟节点是：" + zhao + ",其文本内容：" + zhao.innerText);
                                    /*
                                       获取文本框的内容
                                    */
                                    var textGet = document.getElementById("textGet");
                                    var ip = document.getElementById("username");
                                    textGet.onclick = function () {
                                                      console.log(ip.value);
                                    }
                                    /*
                                       设置文本内容
                                    */
                                    var textSet = document.getElementById("textSet");
                                    textSet.onclick = function () {
                                                      ip.value = "我重新设置了内容";
                                    };
                                    /*
                                       获取#qin的文本内容
                                    */
                                   var text1 = qin.innerHTML;
                                   var text2 = qin.innerText;
                                   console.log(text1);//秦国
                                   console.log(text2);//秦国
                                   var txtObj = qin.firstChild.nodeValue;
                                   console.log(txtObj);//秦国


                  </script>
</body>

</html>

脚踏实地，坚持不懈!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript关于获取节点与获取元素的一些简单了解

我们一般在获取元素的时候，采用的方法有以下几种方法：（1）document.getElementById():通过id来获取。（2）document.getElementsByTagName():返回拥有指定标签名的所有子元素的集合。如果集合里面只有一个元素的话，那么就写成这样document.getElementsByTagName()[0]（3）getElementsByName() ：方法可返回带有指定名称的对象的集合。其中使用最多的是第一种document.getElementById()。
复制链接

扫一扫