资讯专栏INFORMATION COLUMN

Node对象的一些方法

phpmatt / 671人阅读

摘要:对象是什么提供了的标准规范提供了对象,该对象主要提供了解析节点树结构的属性和方法,树结构主要是依靠节点进行解析,称为节点树结构。对象时继承于对象的,是一个用于接受时间的对象。对象和对象是继承于对象的。

Node对象是什么提供了

DOM的标准规范提供了Node对象,该对象主要提供了解析DOM节点树结构的属性和方法,DOM树结构主要是依靠节点进行解析,称为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。

Node对象时继承于EventTarget对象的,EventTarget是一个用于接受时间的对象。

Document对象和Element对象是继承于Node对象的。

判断节点类型



遍历节点 获取父节点与父元素节点

父节点与父元素节点的区别

parentNode:获取指定节点的父节点,其父节点不一定是元素节点

parentElement:获取指定元素的父元素节点,其父节点必须是元素节点


  • 苹果
  • 小米
  • 锤子
空白节点

主流浏览器浏览器解析HTML页面内容为DOM节点树结构时,由于HTML中的源代码换行,会产生空文本的空白节点。

// 创建对象 - 专门用于封装解决空白节点问题
var myTools = {
    // 解决获取其所有子节点childNodes属性的问题
    childNodes : function(parentNode){
        var children = parentNode.childNodes;
        var arr = [];
        for (var i=0; i
获取子节点

通过html页面中置顶元素查找其子节点,通过Node对象的属性实现:

childNodes:获取指定节点的所有子节点

firstChild:获取指定节点的第一个子节点

lastChild:获取指定节点的最后一个子节点


  • 苹果
  • 小米
  • 锤子
获取相邻兄弟节点

proviousSibling:获取指定节点的相邻兄弟节点

nextSibling:获取指定节点的后面相邻节点


  • 苹果
  • 小米
  • 锤子
插入节点 Node对象的appendChild()方法可以向指定节点的子节点列表的最后添加一个新的子节点

  • 苹果
  • 小米
  • 锤子
删除节点

Node对象提供了removeChild()删除指定节点


  • 苹果
  • 小米
  • 锤子
  • 爆米花
  • 替换节点

    Node对象提供了replaceChild()方法用于替换节点

    
    
    • 化物语
    • 伪物语
    • 猫物语
    • 燃尽人间色
    • 东进不太热
    • 提灯照河山
    复制节点

    Node对象提供了cloneNode()方法实现节点复制功能

    
    
    白衣渡我
    textContent属性、innerText属性

    通过textContent属性可以获取和修改节点及其后代的文本属性
    IE引入的innerText属性,类似于textContent,但有一定的区别。

    
    
    提灯照河山

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

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

    相关文章

    • Node对象一些方法

      摘要:对象是什么提供了的标准规范提供了对象,该对象主要提供了解析节点树结构的属性和方法,树结构主要是依靠节点进行解析,称为节点树结构。对象时继承于对象的,是一个用于接受时间的对象。对象和对象是继承于对象的。 Node对象是什么提供了 DOM的标准规范提供了Node对象,该对象主要提供了解析DOM节点树结构的属性和方法,DOM树结构主要是依靠节点进行解析,称为DOM节点树结构。Node对象是解...

      jsyzchen 评论0 收藏0
    • Node.js随手笔记(一):node简介与模块系统

      摘要:模块系统为了让的文件可以相互调用,提供了一个简单的模块系统。但是,没有模块系统。包管理简称,是随同一起安装的包管理工具。输入命令,根据提示配置包的相关信息,生成相应的。以上所描述的模块载入机制均定义在模块之中。 Node.js简介 首先从名字说起,网上查阅资料的时候会发现关于node的写法五花八门,到底哪一种写法最标准呢?遵循官方网站的说法,一直将项目称之为Node或者Node.js。...

      TNFE 评论0 收藏0
    • JavaScript中DOM层次节点(一)

      摘要:是针对和文档的一个,描绘了一个层次化的节点树,允许开发人员添加修改删除节点的一部分。类型级定义了接口,该接口由中的所有节点类型实现。添加的这些属性分别对应于每个元素中都存在的下列标准特性。 DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加、修改、删除节点的一部分。 DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的...

      leap_frog 评论0 收藏0
    • 《JavaScript 闯关记》之 DOM(上)

      摘要:节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形结构。此外,包含在列表中的每个节点相互之间都是同胞节点。在浏览器中,对象是继承自类型的一个实例,表示整个页面。 DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。 节点层次 DOM 可以将任何 HTML 或 XM...

      mzlogin 评论0 收藏0
    • 对MVVM架构一些理解

      MVVM(Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的开发模式,他与MVC模式一样用于把视图(界面)和数据进行解耦,不同的是采用ViewModel来完成数据与视图的双向绑定,通过自动化的方式承担大部分数据工作,来解决由于界面复杂化和快速迭代带来的问题。 由于现在vue比较火,现在就用vue相同的原理(属性劫持)来完成一个简单MVVM...

      Muninn 评论0 收藏0

    发表评论

    0条评论

    最新活动
    阅读需要支付1元查看
    <