美文网首页
节点操作

节点操作

作者: 787518d9b65a | 来源:发表于2018-06-03 06:49 被阅读0次

Node类型

JavaScript中所有节点类型都继承自Node类型。

每个节点都有一个nodeType属性,用于表明节点的类型,共有12个数值常量。

节点信息

nodeName和nodeValue属性可以了解节点的信息。

节点关系

每个节点都有一个childNodes属性,其中包含一个NodeList对象。可以通过方括号语法访问NodeList的值,而且这个对象也有length属性,但并不是Array的实例。也可以通过item()方法访问。Array.prototype.slice()方法可以将其转换为数组。

parentNode属性,指向文档树中的父节点。previousSibling和nextSibling属性,可以访问同一列表中的其他节点。当列表中只有一个接待你,则这两个属性的值都为null。

操作节点

appendChild()方法用于向childNodes列表的末尾添加一个节点。

insertBefore()方法可以把节点放在childNodes列表中某个特定的位置上。这个方法接受两个参数:要插入的节点和作为参照的节点。插入和,被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。如果参照节点是null,则与appendChild()相同。

replaceChild()接受两个参数:要插入的节点和要替换的节点。

removeChild()接受一个参数,要移除的节点。

Document类型

document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。document对象是window对象的一个属性,将其视作全局对象访问。

  • nodeType的值为9;
  • nodeName的值为“#document”;
  • nodeValue的值为null;
  • parentValue的值为null;
  • ownerDocument的值为null;

其子节点可能是一个DocumentType(最多一个)、Element(最多一个)等

document内置访问子节点的documentElement属性,始终指向HTML页面中的<html>元素。还有body属性直接指向<body>元素。

文档信息属性:title、URL、domain、referrer

查找元素:getElementById()、getElementsByTagName()、getElementsByClassName()。HTMLCollection包含namedItem()fangfa1;HTMLDocument类型包含getElementsByName()方法。

此外,document还包含特殊集合。

DOM一致性检测:document.implementation属性是为此提供相应功能和信息的对象。hasFeature()接受要检测的DOM功能的名称和版本号这两个参数。

文档写入:write()、writen()、open()、close()

Element类型

  • nodeType的值为1;
  • nodeName的值为元素的标签名;
  • nodeValue的值为null;
  • parentValue的值为Document或Element;

其子节点可能是Element、Text、Comment等

操作特性:getAttribute()、setAttribute()、removeAttribute()

创建元素:document.createElement()

Text类型

  • nodeType的值为3;
  • nodeName的值为“#text”;
  • nodeValue的值为节点所包含的文本;
  • parentValue是一个Element;
  • 没有子节点

可以通过nodeValue属性或者data属性访问Text节点中包含的文本。

创建文本节点:document.createTextNode(),创建新文本节点的同时,也会为其设置ownerDocument()属性。

将相邻文本节点合并:normalize()

分割文本节点:splitText()

相关文章

  • js常用API

    一、节点 节点属性 节点操作 Document节点 Element节点 对象

  • DOM节点

    操作节点appendChild(节点)insertBefore(节点,参照节点)replaceChild(参照节点...

  • 原生js 获取节点,操作节点,操作类名

    js中获取节点和针对节点的操作以及类名操作 获取节点 孩子节点 childNodes 获取所有子元素节点和文本节点...

  • 节点操作--父子节点

    学习节点操作的目的还是为了获取元素,获取元素的常用 两种方式:1.利用DOM提供的方法(API)获取元素例如:do...

  • 节点操作

    第一组:append() 从选中元素的后面添加内容prepend() 从选中元素的前面添加内容 注意:都是从被...

  • 节点操作

    Node类型 JavaScript中所有节点类型都继承自Node类型。 每个节点都有一个nodeType属性,用于...

  • 节点操作

    常用节点分为4类 nodeNamenodeTypenodeValue文档节点#document9null元素节点元...

  • 节点操作

    jquery元素节点操作 创建节点 var $div = $(' ');var $div2 = $(' 这是一个d...

  • 节点操作

    1、节点操作之父节点 2、节点操作之子节点 3、获取第一个子元素和最后一个子元素 4、新浪下拉菜单案例: 5、节点...

  • 节点操作

网友评论

      本文标题:节点操作

      本文链接:https://www.haomeiwen.com/subject/dnwdsftx.html