DOM（HTML中节点的获取）_html 如何获取文本节点 js dom-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_16946803/article/details/78472329

<span style="color:#ff0000">内容</span>

元素节点/文本节点/属性节点的nodeName/nodeValue/nodeType区别:

noteType nodeName nodeValue

元素节点 1 当前元素标签名 null

属性节点 2 当前属性名称当前属性的值

文本节点 3 #text 当前文本内容

<span style="color:#ff0000">代码</span>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
     <script type="text/javascript">
       function p(data){
         console.debug(data);
       }
       window.onload = function(){
        var a1 = document.getElementById("a1");
         //元素节点
         p(a1.nodeName);
         p(a1.nodeValue);
         p(a1.nodeType);
         
         p("--------------------------");
         //属性节点
         var a2 = a1.attributes["href"];
         p(a2.nodeName);
         p(a2.nodeValue);
         p(a2.nodeType);
         
         //文本节点
         p("--------------------------");
         p(a1.firstChild.nodeName);
         p(a1.firstChild.nodeValue);
         p(a1.firstChild.nodeType);
        /*  
         p("-------------增加/删除/修改-------------");
         //------DOM增加/删除/修改
         var boys = document.getElementById("boys");
         p(boys.childNodes);
         p(boys.lastChild);//最后一个
         p(boys.lastChild.previousSibling);//指向上一个
         p(boys.lastChild.previousSibling.nextSibling.hasChildNodes());
         
         //需求:把"王健林"添加到"刘强东"后
         var newBoy = document.getElementById("newBoy");
         
         boys.appendChild(newBoy);//添加
         //boys.removeChild(newBoy);//删除
         
         //js创建一个新的div标签
         
         //王健林  修改   马龙
         var newdiv = document.createElement("div");//创建一个新的标签
         newdiv.innerHTML="马龙";
         
         boys.replaceChild(newdiv, newBoy);//修改 */
         
       };
     
     </script>
  </head>
  
  <body>
     <a href="#" name="a2" id="a1">百度一下</a>
     <div id="newBoy">王健林</div>
     
     <div id="boys"><div>马云</div><div>马化腾</div><div>李彦宏</div><div>刘强东</div></div>
  </body>
</html>

结果

A index.html:13:10
null index.html:13:10
1 index.html:13:10
-------------------------- index.html:13:10
href index.html:13:10
# index.html:13:10
2 index.html:13:10
-------------------------- index.html:13:10
#text index.html:13:10
百度一下 index.html:13:10
3