码迷,mamicode.com
首页 > 编程语言 > 详细

javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

时间:2018-02-14 00:17:39      阅读:24      评论:0      收藏:0      [点我收藏+]

标签:info   mirror   correct   off   ack   ping   问题:   use   利用   

DOM 含义: DOM 是文档对象模型(Document Object Model 是一种基于浏览器编程的一套API 接口,我W3C 出台推荐的标准。其赋予了JS 操作节点的能力,当网页被加载时,浏览器就会创建页面的文档对象模型。
节点: 根据W3C的HTML DOM 标准,HTML 文档中的所有内容都是节点。
1. 整个文档是一个文档节点
2. 每个HTML元素是元素节点
3. HTML元素内的文本是文本节点
4.每个HTML属性都是属性节点
5.每个注释都是注释节点
所以HTML DOM 将HTML 文档视作树结构,这种结构被称为节点数。通过HTML DOM 节点树种的所有节点都可以通过JS进行访问。所有HTML 元素(节点)均可被修改、

一、 创建节点、追加节点
1.createElement(标签名)创建一个元素节点(具体的一个元素)。
2.appendChild(节点) 追加一个节点
3.createTextNode(节点文本内容)创建一个文本节点

var oDiv = document.createElement(‘div‘)  // 常见一个div元素,因为是document 对象的方法
var oDivText = document.createTextNode(‘666‘) // 创建一个文本节点内容是666 , 因为是document 对象的方法
oDiv.appendChild(oDivText) // 父级.appendChild(子节点); 在div元素中添加6666
document.body.appendChild(oDiv) // 父级.appendChild(子节点);document.body是指向<body> 元素
document.documentElement.appendChild(createNode) //父级.appendChild(子节点); document.documentElement 是指向html 元素
二、插入节点
1.appendChild(节点)也是一种插入节点的方式,还可以添加已经存在的元素,会将其元素从原来的位置移动新的位置
2.insertBefore(a,b), 意思是a节点会插入b节点的前面
var oDiv = document.createElement("div");//创建一个div元素,因为是document对象的方法。  
var oDiv1 = document.getElementById("div1");  
            document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点  
    ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾  
注: 在练习的时候,
技术分享图片
注意以上2种写法的差别,下面一种换行的方式会导致,最后一个lastChild 是空格节点,所以必须保证同一行
详见附件方法

三、删除、移除节点
1、removeChild(节点) 删除一个节点,用于移除删除一个参数(节点)。其返回的被移除的节点,被移除的节点仍在文档中,只是文档中已没有其位置了。
var removeChild = document.body.removeChild(div1);//移除document对象的方法div1
四、替换节点
1、replaceChild(插入的节点,被替换的节点) ,用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要被替换的节点。返回的是被替换的节点。
var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2  
五、查找节点
1、childNodes 包含文本节点和元素节点的子节点。
for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。  
//nodeType是节点的类型,利用nodeType来判断节点类型,再去控制子节点  
//nodeType==1 是元素节点  
//nodeType==3 是文本节点  
    if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点  
        console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点  
    }  
}  
2、A、children也可以获取子节点,而且兼容各种浏览器。包括IE6-8
B、parentNode:获取父节点
var oList = document.getElementById(‘list‘);//oList是做的ul的对象  
var oChild=document.getElementById(‘child‘);//oChild是做的ul中的一个li的对象  
//通过子节点查找父节点//parentNode:获取父节点  
console.log(oChild.parentNode);//在控制器日志中显示父节点  
console.log(oList.children);//在控制器日志中显示oList子节点  
console.log(children.length)//子节点的个数  
3、A、firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题:firstChild是IE兼容,firstElementChild是非IE兼容。
<span style="white-space:pre">      </span>//查找第一个子节点的封装函数  
<span style="white-space:pre">      </span>function firstChild(ele) {  
    <span style="white-space:pre">      </span>if (ele.firstElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器(IE或非IE)中兼容</span>  
    <span style="white-space:pre">      </span> return ele.firstElementChild;  
    <span style="white-space:pre">      </span>} else {  
    <span style="white-space:pre">      </span> return ele.firstChild;  
    <span style="white-space:pre">      </span>}  
<span style="white-space:pre">      </span>}  
<span style="white-space:pre">      </span>firstChild(oList).style.background = ‘red‘;//将获得的节点的背景变成红色  
B、lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题:lastChild 是IE兼容,lastElementChild是非IE兼容。
<span style="white-space:pre">      </span>//查找最后一个子节点的封装函数  
<span style="white-space:pre">      </span>function lastChild(ele) {  
    <span style="white-space:pre">      </span>if (ele.lastElementChild) {<span style="font-family: Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器(IE或非IE)中兼容</span>  
    <span style="white-space:pre">      </span> return ele.lastElementChild;  
    <span style="white-space:pre">      </span>} else {  
    <span style="white-space:pre">      </span> return ele.lastChild;  
    <span style="white-space:pre">      </span>}  
<span style="white-space:pre">      </span>}  
<span style="white-space:pre">      </span>lastChild(oList).style.background = ‘red‘;//将获得的节点的背景变成红色  
C、nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。
<span style="white-space:pre">      </span>//查找下一个兄弟节点的封装函数  
<span style="white-space:pre">      </span>function nextSibling(ele) {  
    <span style="white-space:pre">      </span>if (ele.nextElementSibling) {  
    <span style="white-space:pre">      </span> return ele.nextElementSibling;  
    <span style="white-space:pre">      </span>} else {  
    <span style="white-space:pre">      </span> return ele.nextSibling;  
        <span style="white-space:pre">      </span>}  
    <span style="white-space:pre">      </span>}  
<span style="white-space:pre">      </span>nextSibling(oMid).style.background = ‘red‘;  
D、previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。
<span style="white-space:pre">      </span>//查找上一个兄弟节点的封装函数  
<span style="white-space:pre">      </span>function previousSibling(ele) {  
    <span style="white-space:pre">      </span>if (ele.nextElementSibling) {  
    <span style="white-space:pre">      </span> return ele.previousElementSibling;  
    <span style="white-space:pre">      </span>} else {  
    <span style="white-space:pre">      </span> return ele.previousSibling;  
    <span style="white-space:pre">      </span>     }  
    <span style="white-space:pre">      </span>}  
<span style="white-space:pre">      </span>previousSibling(oMid).style.background = ‘red‘;  
转载至:http://blog.csdn.net/torrex/article/details/54376633




附件列表

     

    javasript 的DOM 节点操作:创建,插入,删除,复制以及查找节点

    标签:info   mirror   correct   off   ack   ping   问题:   use   利用   

    原文地址:https://www.cnblogs.com/zjx2011/p/8447709.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    0条  
    登录后才能评论!
    © 2014 mamicode.com 版权所有 京ICP备13008772号-2
    迷上了代码!