您当前的位置:网站首页>dom节点及对节点的常用操作方法

dom节点及对节点的常用操作方法

3周前 (03-08) 投稿作者:小石头资源网 围观人数:40 评论人数:0次
dom节点及对节点的常用操作方法 在说dom节点前,先来看看页面的呈现: dom渲染流程:  1、浏览器解析html源码,然后创建一个DOM树。 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点)。DOM树的根节点就是documentElement,对应的是html标签。   2、浏览器解析CSS代码,计算出最终的样式数据。 对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置,用户设置,外联样式,内联样式,html中的style(嵌在标签中的行间样式)。   3、创建完DOM树并得到最终的样式数据之后,构建一个渲染树。 渲染树和DOM树有点像,但是有区别。DOM树完全和html标签一一对应,而渲染树会忽略不需要渲染的元素(head、display:none的元素)。渲染树中每一个节点都存储着对应的CSS属性。   4、当渲染树创建完成之后,浏览器就可以根据渲染树直接把页面绘制到屏幕上。   那我们的节点大致是12种: 我们平常可见的也就文本节点,属性节点,元素节点,注释节点等... 先来看看获取节点: childNodes:获取元素下的所有节点:返回一个数组 var box_ele = document.getElementById("box"); var child_nodes = box_ele.childNodes; nodeType:辨别元素的类型 1=> 元素节点 2=> 属性节点 3=》 文本节点 4.... nodeValue:获得文本节点的值     children:获取元素下的所有元素节点:返回一个数组 var box_ele = document.getElementById("box"); var child_nodes = box_ele.children;   一般而言,我们多用childr。 nodeName:判定元素的类型 返回标签的大写 如:DIV SPAN等.   另外的获取:关系型节点获取 子集类: firstChild:第一个子节点 firstElementChild:第一个元素子节点 lastChild:最后一个子节点 lastElementChild:最后一个元素子节点   兄弟类: nextSibling:下一个节点 nextElementSibling:下一个元素节点 previousSibling:上一个节点 previousElementSibling:上一个元素节点   父级类: parentNode:父节点   特别注意的: 属性节点: 由于属性都是在元素里边的,所以属性节点获取一定是在元素节点之上。 var box_ele = document.getElementById("box"); var attributes = box_ele.attributes;   这里的attributes是一个数组: 属性分为属性和属性值: 那我们可以通过之前的nodeType,nodeName,nodeValue来看看attributes里的内容: 如: attributes[0].nodeType attributes[0].nodeName attributes[0].nodeValue     以上是对节点的获取,下面看一看对节点的操作: 首先看看如何穿创建一个节点; var ele = document.createElement("div"); 创建一个div节点 ele.innerHTML = "你好世界"; 加入内容,再放入页面中: 如何放入呢? ele.appendChild(node)  把node节点插入到box的内部最后的位置 ele.insertBefore(newNode, existNode)  在box内,把newNode节点插入到exsitNode的前面 通过appendChild或者insertBefore都可以!   再来看看如何删除: removeChild():这个方法需要找到父节点再删除: box.parentNode.removeChild(box); box.remove(); remove:直接删除!但:兼容极差。   节点的克隆 cloneNode():克隆当前层,不会深层次克隆。 cloneNode(true):整层及以下都克隆。   最后就是节点替换了: obj.replaceChild(新添加的节点 , 被替换的节点)  替换子节点                          

1.png

鼠年用趣闲赚兼职月赚3000元

欢迎加入小石头羊毛群,QQ群号:895146484点击加入小石头羊毛群

  • 版权说明
    免责声明:本文来自网友投稿或网络收集,不代表本站的观点和立场,如有侵权请联系xiaox@buglm.com