DOM里面的Node对象和Element对象的区别

qieangel2013 发布于2019-08-23 11:37 / 1729人阅读

摘要：对象的标准规范中提供了对象，该对象主要提供了用于解析节点树结构的属性和方法，树结构主要是依靠节点进行解析，成为节点树结构，对象是解析节点树结构的主要入口，对象提供的属性和方法，可以实现遍历节点插入节点等操作判断节点类型元素名得到标签名称大

Node对象

Dom的标准规范中提供了Node对象，该对象主要提供了用于解析DOM节点树结构的属性和方法，DOM树结构主要是依靠节点进行解析，成为DOM节点树结构，Node对象是解析DOM节点树结构的主要入口，Node对象提供的属性和方法，可以实现遍历节点、插入节点等操作

判断节点类型

元素名.nodeName; - 得到标签名称(大写)
元素名.nodeType; - 得到元素的类型
元素名.nodeValue; - 得到元素的文本内容

获取父节点

节点名.parentNode; - 获取子节点的父节点
节点名.parentElement; - 获取其父元素节点

获取子节点

节点名.childNodes; - 获取父节点下的所有子节点
节点名.firstChild; - 获取父节点下第一个子节点
节点名.lastChild; - 获取父节点下最后一个子节点

获取相邻兄弟节点

节点名.previousSibling; - 获取上一个兄弟元素
节点名.nextSibling; - 获取下一个兄弟元素

appendChild()方法

父节点.appendChild(子节点); - 向父节点添加子节点，默认从最后面添加
父节点.insertBefore(新创建的节点,页面中的旧节点); - 向父元素中的指定子节点在其前面添加

删除节点

父节点.removeChild(子节点); - 删除指定的子节点

替换节点

父节点.replaceChild(新的子节点,目标节点); - 可以替换掉父节点中被选中的目标子节点

复制节点

被复制的目标节点.cloneNode(true); - true为深度克隆，会将节点的所有东西克隆过去，false为非深度克隆，不会克隆文本，默认为false

textContent属性

节点.textContent; - 输出节点里面的文本内容

Element对象

DOM的标准规范中提供了Element对象，该对象提供了HTML页面中所有元素所具有的属性和方法，DOM标准规范中提供了Node对象，主要是依靠DOM节点树结构访问和更新HTML页面的内容。而DOM标准规范中提供了Element对象，主要是依靠DOM元素树结构访问和更新HTML页面内容，所有的HTML页面的元素都是HTMLElement对象，而这个对象又是继承于Element对象的

获取子元素

父元素.firstElementChild; - 获取父元素中第一个子元素
父元素.lastElementChild; - 获取父元素中最后一个子元素

获取相邻兄弟元素

元素.previousElementSibling; - 获取元素的上一个兄弟元素
元素.nextElementSibling; - 获取元素的下一个兄弟元素

属性操作

元素.getAttribute("属性名称"); - 获取指定元素的指定属性
元素.setAttribute("属性名称","属性值") - 设置指定元素的属性名称以及属性值
元素.removeAttribute("属性名称"); - 删除指定元素的属性
元素.hasAttribute("属性名称"); - 判断指定元素指定属性是否存在，结果返回布尔值

innerHTML属性

元素.innerHTML; - 获取指定元素的HTML代码
父元素.innerHTML=HTML代码; - 给父元素添加HTML代码，直接把html代码写在字符串中，但是这个方法具有安全问题

云服务器 GPU云服务器 js数据对象和对象的区别吗对象存储和cdn的区别对象存储和虚拟主机的区别 javascript的dom对象

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97215.html

HTMLCollection与NodeList

摘要：唯一要注意的是返回的虽然是，但是实际上是元素集合，并且是静态的其他接口返回的和都是的。与相同的是它也是一个动态的集合，与不同的是，中保存的是一组无序的属性节点的集合。及以下版本浏览器中，注释属于算作因此会出现在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有两个方面不一样1.包含节点的类型2.使用方法 1.包含节点的类型不同(重要) (1)Nod...

msup 2019-08-01 15:41 评论0 收藏0
HTMLCollection与NodeList

摘要：唯一要注意的是返回的虽然是，但是实际上是元素集合，并且是静态的其他接口返回的和都是的。与相同的是它也是一个动态的集合，与不同的是，中保存的是一组无序的属性节点的集合。及以下版本浏览器中，注释属于算作因此会出现在里。而且是元素的集合。 NodeList v.s. HTMLCollection 主要有两个方面不一样1.包含节点的类型2.使用方法 1.包含节点的类型不同(重要) (1)Nod...

yanwei 2019-08-20 10:40 评论0 收藏0
angularjs特效之分散的字符串--解析compile link $compile $inter

摘要：效果预览来自的效果预览引用了，已被墙，请谨慎预览转载声明这篇文章其实源自的博客。主要内容整个效果都建立在的里面。为了弥补这个缺陷，我决定改成在函数中对进行操作。重点来了，是和初始位置的相对位置。就是元素的初始值。效果预览来自codepen的效果预览：（引用了angularjs，已被墙，请谨慎预览）http://codepen.io/flybywind/pen/aNjxJa 转载声明...

SHERlocked93 2019-08-30 12:58 评论0 收藏0
angularjs特效之分散的字符串--解析compile link $compile $inter

摘要：效果预览来自的效果预览引用了，已被墙，请谨慎预览转载声明这篇文章其实源自的博客。主要内容整个效果都建立在的里面。为了弥补这个缺陷，我决定改成在函数中对进行操作。重点来了，是和初始位置的相对位置。就是元素的初始值。效果预览来自codepen的效果预览：（引用了angularjs，已被墙，请谨慎预览）http://codepen.io/flybywind/pen/aNjxJa 转载声明...

explorer_ddf 2019-08-19 18:10 评论0 收藏0