DOM对象-_this.nextsibling为null-CSDN博客

本文链接：https://blog.csdn.net/Qcherlsh/article/details/47091451

访问兄弟节点
1. nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。
语法：nodeObject.nextSibling
说明：如果无此节点，则该属性返回 null。
2. previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。
语法：nodeObject.previousSibling
说明：如果无此节点，则该属性返回 null。
注意: 两个属性获取的是节点。Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。
解决问题方法:
判断节点nodeType是否为1, 如是为元素节点，跳过。

这里写图片描述

删除结点removeChild()：
这里写图片描述
注意: 把删除的子节点赋值给 x，这个子节点不在DOM树中，但是还存在内存中，可通过 x 操作。
如果要完全删除对象，给 x 赋 null 值，代码如下:

清除结点内容代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="content">
  <h1>html</h1>
  <h1>php</h1>
  <h1>javascript</h1>
  <h1>jquery</h1>
  <h1>java</h1>
</div>

<script type="text/javascript">
function clearText() {
  var content=document.getElementById("content");
  // 在此完成该函数

  for(i=content.childNodes.length-1;i>=0;i--)
 {
     var childNode=content.childNodes[i];
     content.removeChild(childNode);
 }
}
</script>

<button onclick="clearText()">清除节点内容</button>



</body>
</html>

替换元素节点replaceChild() replaceMessage() 代码，实现将 b 标签替换成 i 标签。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>


  <div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>
  <a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

    <script type="text/javascript">
      function replaceMessage(){
       var x=document.getElementById("oldnode");
       var s=x.innerHTML;

       var z=document.createElement("i");
       x.parentNode.replaceChild(z,x);
       z.innerHTML=s;
       }    
  </script>

 </body>
</html>

创建元素结点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
var main1 = document.body;
//创建链接
function createa(url,text)
{
    var alink = document.createElement("a");
    alink.setAttribute("href",url);
    alink.innerHTML=text;
    return alink;


}
// 调用函数创建链接
main1.appendChild(createa("http://www.imooc.com","慕课网"));

</script> 
</body>
</html>

创建文本结点

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">

.message{    
    width:200px;
    height:100px;
    background-color:#CCC;}

</style>
</head>
<body>
<script type="text/javascript">

var s=document.createElement("p");
s.className="message";
var t=document.createTextNode("I love javaScript!");
s.appendChild(t);
document.body.appendChild(s);
</script> 

</body>
</html>