DOM基础心得

刚刚写了一大堆，被我不小心给刷新下，没了。现在就不写那么多了。直接贴代码：

?
function modify(){
  //createElement()生成元素
    var newElem=document.createElement("p");
    newElem.id="newP";//相当于 newElem.setAttribute("id","newP");
  //createTextNode() 生成传递文本参数的文本节点
    var newText=document.createTextNode("this is the second paragraph");
    newElem.appendChild(newText);//把文本添加到新建元素节点下
    document.body.appendChild(newElem);//然后吧新建元素添加到body下
    //替换文本 替换了<em>标签之间的文本为“first”
    document.getElementById("emphasis1").childNodes[0].nodeValue="first";
    //alert(node);
  }
?
<p id="paragraph1">this is the <em id="emphasis1">one and only.first and second</em>
  paragraph on the page</p>

如果上面的document.getElementById("emphasis1").childNodes[0].nodeValue该成：document.getElementById("emphasis1").innerHTML也是一样，但是后者会更好理解。但innerHTML包含HTML。

那么为什么 document.getElementById("emphasis1").childNodes[0].nodeValue这句话不能改写成这样呢：document.getElementById("emphasis1").nodeValue，原因我可能知道了。是这样的，childNodes得到的不仅仅是根下的元素（如span），还包含TextNode元素，我下面还有测试，就是还包含#text元素。

困惑2（直接看下代码，待会说明）：

复制代码
<div id="Div1">
 <span id="sp1">节点1</span>
 <span id="sp2">节点2</span>
</div>
</body>
</html>
<script type="text/javascript">
  var _nod=document.getElementById("sp1");
var _pNod=_nod.parentNode;
for(var i=0;i<_pNod.childNodes.length;i++){  
      alert(_pNod.childNodes[i].nodeName);
  }
</script>
复制代码

pNod.childNodes[i].nodeName,这句话应该得到的是标签的类型吧，运行后的结果是：#text、span、#text、span、#text。那就奇怪了，假如<span>里的文本（节点1、节点2）算是文本节点的话，那么结果也应该是：span、#text、span、#text。还有childNodes到底得到滴是什么东东？

 

我下面又做了个测试：

复制代码
<body>
<ul id="Div1">
<li id="sp1">节点1</li>
<li id="sp2">节点2</li>
</ul>
</body>
</html>
<script type="text/javascript">
  var _nod=document.getElementById("Div1");
  alert(_nod.childNodes[1].firstChild.nodeValue);
 
</script>
复制代码

发现一个一直让我误解滴问题，我本来想var _nod=document.getElementById("Div1");这句得到的是UL（没错），然后我就想既然是UL，那么我_nod.firstChild得到滴应该是li，但测试下得到滴竟然是#text，

传说有空格或换行就会出现#text，这个时候使用firstChild就不能得到想要的li了，所以以后要慎重用firstChild，首孩子就用childNodes[1]吧。

照这样，我测试了下  alert(_nod.childNodes[1].nodeName);得到滴真的是LI。然后我又改了下，  alert(_nod.childNodes[1].nodeValue);，你猜得到了什么，结果既然是null。呵呵。。这个是意料之中滴事了，

经过早上的测试我已经知道了LI节点下面的还有一个文本节点要算（就是#text啦）。所以要得到“节点1”就要这样写：  alert(_nod.childNodes[1].firstChild.nodeValue);或  alert(_nod.childNodes[1].childNodes[0].nodeValue);

 

下面呢。我要总结下DOM的一些常用操作，我 就不把那些常用操作写出来了，直接应用到代码了：

复制代码
<script type="text/javascript">
  function modify(){
  var _p=document.getElementById("paragraph1");
  //createElement()生成元素 
var newElem=document.createElement("p");
    newElem.id="newP";//相当于 newElem.setAttribute("id","newP");
//createTextNode() 生成传递文本参数的文本节点
var newText=document.createTextNode("新建节点的文本");
    newElem.appendChild(newText);//把文本添加到新建元素节点下
    _p.appendChild(newElem);//然后吧新建元素添加到body下
//替换文本 替换了<em>标签之间的文本为“first”
//alert(node);
var _elem2=newElem.cloneNode(true);//克隆  一个节点
    _elem2.id="elemId";
    var _txt=document.createTextNode("新建文本，用来替换");
    _elem2.replaceChild(_txt,_elem2.childNodes[0]);//将节点_elem2的文本替换
    newElem.parentNode.insertBefore(_elem2,newElem);//将节点_elem2插入到newElem之前
    newElem.parentNode.removeChild(newElem);
  }
  </script>
</head>

<body>
<button onclick="modify()"> add/replace text</button>
<p id="paragraph1">this is the <em id="emphasis1">one and only.first and second</em>
  paragraph on the page</p>
</body>
复制代码

 

table操作

IE比较特殊，他对DOM操作table不能解释，这是别人说滴，我特地做了测试，发现IE8以后才这样滴，之前的版本还不会。搞特殊，所以要用table操作（下面是我测试的代码，两种方式都有）：

复制代码
<script type="text/javascript">
  function tableCreate(){
    var row=document.createElement("tr");
    row.innerHTML="<td>&nbsp;随便写点什么吧</td><td>&nbsp;随便写点什么吧</td>"
    var tab=document.getElementById("tab");
    tab.appendChild(row);
  }
</script>
</head>

<body onload="tableCreate()">
<table border="1" id="tab">
  <tr>
    <td>&nbsp;随便写点什么吧</td>
    <td>&nbsp;随便写点什么吧</td>
  </tr>
  <tr>
    <td>&nbsp;随便写点什么吧</td>
    <td>&nbsp;随便写点什么吧</td>
  </tr>
</table>

</body>
</html>
<script type="text/javascript">
  var tab=document.getElementById("tab");
  var row2=tab.insertRow(2);//新增加第三行
var cell20=row2.insertCell(0);//为新增第三行添加一个单元格
  cell20.innerHTML="20";
  var cell21=row2.insertCell(1);
  cell21.innerHTML="20";
</script>
复制代码

 

posted @   小霖2012  阅读(309)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示
AI IDE Trae