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

发布时间:2019-06-06 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了DOM里面的Node对象和Element对象的区别脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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代码写在字符串中,但是这个方法具有安全问题

脚本宝典总结

以上是脚本宝典为你收集整理的DOM里面的Node对象和Element对象的区别全部内容,希望文章能够帮你解决DOM里面的Node对象和Element对象的区别所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:HTML