只读的关系指针
DOM中的关系指针都是只读的
<div class="box" id="box"></div> <script> var oBox = document.getElementById(‘box‘); console.log(oBox.parentNode.nodeName);//BODY //在IE8-浏览器下会报错，在其他浏览器下忽略此条语句 oBox.parentNode = document; console.log(oBox.parentNode.nodeName);//BODY </script>
操作方法
【appendChild()】
appendChild()方法用于向childNodes列表的末尾添加一个节点，并返回新增节点。添加节点后，childNodes中的新增节点、父节点和以前的最后一个子节点的关系指针都会相应地得到更新。
<div class="box" id="box"></div> <script> var oBox = document.getElementById(‘box‘); var newNode = document.createElement(‘ul‘); var returnedNode = oBox.appendChild(newNode); console.log(returnedNode.nodeName);//UL console.log(returnedNode == newNode);//true console.log(returnedNode == oBox.lastChild);//true </script>
【insertBefore()】
insertBefore()方法接收两个参数：要插入的节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个兄弟节点(previousSibling)，同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()方法执行相同的操作。
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
<li class="in">4</li>
<li class="in">5</li>
<li class="in">6</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
//新增一个li元素
var oAdd = document.createElement(‘li‘);
//设置新增元素的css样式
oAdd.className = "in";
oAdd.style.cssText = ‘background-color:red;border-radius:50%‘;
//添加到oList中
oList.insertBefore(oAdd,null);
var num = -1;
var max = oList.children.length;
function incrementNumber(){
num++;
//oList.getElementsByTagName(‘li‘)[max]相当于null，所以不报错
oList.insertBefore(oAdd,oList.getElementsByTagName(‘li‘)[num]);
if(num == max){
num = -1;
}
if(num == 0){
num = 1;
}
setTimeout(incrementNumber,1000);
}
setTimeout(incrementNumber,1000);
</script>
【insertAfter()封装】
原生JavaScript中并没有insertAfter()方法，但是可以用insertBefore()和appendChild()封装方法
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling)
}
}
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
</ul>
<script>
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling)
}
}
var oList = document.getElementById(‘list‘);
var oLi2 = oList.getElementsByTagName("li")[1];
var newElement = document.createElement("li");
insertAfter(newElement,oLi2);
console.log(oList.childNodes);//在标准浏览器下返回[text, li.in, text, li.in, li, text],在IE8-浏览器下不包含空白文本节点
</script>
【replaceChild()】
replaceChild()接收的两个参数是要插入的节点和要替换的节点，要替换的节点将由这个方法返回并从文档树中移除，同时由要插入的节点占据其位置
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
<li class="in">4</li>
<li class="in">5</li>
<li class="in">6</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
function incrementNumber(){
//获取oList中子元素的个数
var len = oList.getElementsByTagName(‘li‘).length;
//如果长度不为0
if(len){
//删除最后一个子元素
oList.removeChild(oList.getElementsByTagName(‘li‘)[len-1]);
//再次调用计时器
setTimeout(incrementNumber,1000);
}
}
//1s后执行函数incrementNumber
setTimeout(incrementNumber,1000);
</script>
【removeChild()】
removeChild()方法接收一个参数，即要移除的节点，被移除的节点成为方法的返回值。
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
<li class="in">4</li>
<li class="in">5</li>
<li class="in">6</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
function incrementNumber(){
//获取oList中子元素的个数
var len = oList.getElementsByTagName(‘li‘).length;
//如果长度不为0
if(len){
//删除最后一个子元素
oList.removeChild(oList.getElementsByTagName(‘li‘)[len-1]);
//再次调用计时器
setTimeout(incrementNumber,1000);
}
}
//1s后执行函数incrementNumber
setTimeout(incrementNumber,1000);
</script>
【cloneNode()】
cloneNode方法用于创建调用这个方法的节点的一个完全相同的副本，该方法接收一个布尔值参数，表示是否执行深复制。在参数为true时，执行深复制，也就是复制节点及整个子节点树。在参数为false的情况下，执行浅复制，即复制节点本身。复制后返回的节点副本属于文档所有，但并没有为它指定父节点。若参数为空，也相当于false
[注意]cloneNode()方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等。这个方法只复制特性、(在明确指定的情况下复制)子节点，其他一切都不会复制。
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
<li class="in">4</li>
<li class="in">5</li>
<li class="in">6</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
var deepList = oList.cloneNode(true);
/*IE8-与其他浏览器在处理空白字符的方式不一样，IE8-不会为空白符创建节点*/
console.log(deepList.childNodes.length);//IE8-为6，其他浏览器为11
document.body.insertBefore(deepList,oList);
var shallowList = oList.cloneNode();
console.log(shallowList.childNodes.length);//0
</script>
【insertAdjacentHTML()】
insertAdjacentHTML()方法接收两个参数:插入的位置和要插入的HTML文本。
第一个参数必须是下列值之一，且这些值都必须是小写形式:
"beforebegin",在当前元素之前插入一个紧邻的同辈元素
"afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素
"beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
"afterend",在当前元素之后插入一个紧邻的同辈元素
第二个参数是一个HTML字符串，如果浏览器无法解析字符串，就会抛出错误
<div class="box" id="box">我是初始元素</div>
<script>
var oBox = document.getElementById(‘box‘);
oBox.insertAdjacentHTML("beforebegin","<p>我是新的前兄弟元素</p>")
oBox.insertAdjacentHTML("afterbegin","<p>我是新的前子元素</p>")
oBox.insertAdjacentHTML("beforeend","<p>我是新的后子元素</p>")
oBox.insertAdjacentHTML("afterend","<p>我是新的后兄弟元素</p>")
</script>
/* 屏幕结果显示为 我是新的前兄弟元素 我是新的前子元素 我是初始元素 我是新的后子元素 我是新的后兄弟元素 */
注意事项
【注意事项1】如果传入到appendChild()、replaceChild()、insertBefore()中的节点已经是文档的一部分了，则将该节点从原来的位置转移到新位置
<ul class="list" id="list">
<li class="in">0</li>
<li class="in" id="test">test</li>
<li class="in">2</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
var oTest = document.getElementById(‘test‘);
document.onclick = function(){
//点击document文档后，三个li的顺序从0 test 2 变成 0 2 test
oList.appendChild(oTest);
setTimeout(function(){
//1s后，三个li的顺序变成 2 0 test
oList.insertBefore(document.getElementsByTagName(‘li‘)[0],oTest);
setTimeout(function(){
//又过1s后，只有两个li，且顺序为test 0
oList.replaceChild(oTest,document.getElementsByTagName(‘li‘)[0]);
},1000);
},1000);
}
</script>
【注意事项2】动态性的注意事项
【1】存变量的情况
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
//oIn0指向的是第0个对象，而并不是第0个位置
var oIn0 = oList.getElementsByTagName("li")[0];
console.log(oIn0.innerHTML);//1
//oIn0指向的是原来的第0个对象，只不过从第0个位置变化到第2个位置，
oList.appendChild(oIn0);
console.log(oIn0.innerHTML);//1
</script>
【2】不存变量的情况
<ul class="list" id="list">
<li class="in">1</li>
<li class="in">2</li>
<li class="in">3</li>
</ul>
<script>
var oList = document.getElementById(‘list‘);
//获取第0个位置的对象
console.log(oList.getElementsByTagName("li")[0].innerHTML);//1
//将第0个位置的对象变化到第2个位置
oList.appendChild(oList.getElementsByTagName("li")[0]);
//重新获取第0个位置的对象
console.log(oList.getElementsByTagName("li")[0].innerHTML);//2
</script>
时间： 2024-12-26 15:57:51