资讯专栏INFORMATION COLUMN

JS学习笔记(第10章)(DOM之节点层次)

kamushin233 / 1070人阅读

摘要:节点层次是针对和文档的一个。每一段标记都可以通过一个节点来表示。用于表明节点的类型。返回新增的这个节点。将节点插入到节点列表指定的位置。节点有以下的特性为,为指向元素,指向元素。提供了对元素的标签名,子节点和特性的访问。

 

节点层次

DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。每个节点都有自己的特点、数据和方法,也与其他的节点存在某种关系,构成了层次。

元素为文档元素。是文档的最外层元素。每一段标记都可以通过一个节点来表示。HTML元素通过元素点表示,特性通过特性点来表示。文档类型通过文档类型节点来表示。注释通过注释节点来表示。共有12种节点类型,这些类型都继承自一个基类型。

1、Node类型

每个节点都有一个nodeType属性。用于表明节点的类型。要了解节点的具体信息,可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型。

每个节点都有一个childNodes属性,其中保存着NodeList对象。可以通过方括号,也可以使用item()来访问Nodelist中的节点。

每个节点都有一个parentNode属性,指向父节点。 都有previousSibling 和nextSibling

父节点的firstChild和lastChild分别指向其childNodes的第一个和最后一个节点。

因为节点的关系指针都是只读的,所以DOM提供了操作节点的方法。

appendChild():向childNodes列表的末尾添加一个节点。返回新增的这个节点。如果已经有了这个节点, 那么就将该节点从原来的位置转移到最后的位置。

insertBefore():将节点插入到节点列表指定的位置。接收两个参数,被插入的节点和作为参照的节点, 被插入的节点将会变成参照节点的前一个同胞节点。

replaceChild():替换节点。接收两个参数,要插入的节点和要替换的节点。 返回要替换的节点。

removeChild():移除节点。 返回值为那个被移除的节点。

cloneNode():复制节点。参数为 true的时候执行深复制,为false则执行浅复制。这个方法只复制特性,不会复制节点中的js属性。

2、Document类型

js通过document类型表示文档。document对象是HTMLDocument的一个实例。Document节点有以下的特性:
nodeType为9,nodeName为‘#document’document.documentElement指向html元素,document.body指向body元素。

document.title:获取或修改文档的标题。

document.URL:获取完成的URL

document.domain:获取域名

document.referrer:获取来源页面的URL

document.getElementById():

document.getElementByTageName:获取到HTMLCollection对象,这个对象有一个方法namedItem(),可以通过元素的name特性取得集合中的项。

document.getElementByName():获得所有有name特性的元素。

特殊集合:

document.forms:取得文档中所有form元素。

document.images:取得所有的img元素。

document.links:取得所有带href特性的a元素

document.write():页面写入内容

3、Element类型

element类型为xml或者html的元素。提供了对元素的标签名,子节点和特性的访问。

特性:nodeType为1, nodeName的值为元素的标签名。 parentNode可能为Document或者Element

标准属性:id、title 、lang(元素内容的语言代码,很少使用)、dir(值为ltr或rtl)、className

取得特性: getAttribute()有两类特殊的特性,通过getAttribute返回的值并不相同。第一个就是style,返回的是style的字符串。 第二个就是onlick这样的事件处理程序,返回的也是相应代码的字符串。基于这些,一般只有在取得自定义特性值的时候,才使用getAttribute的方法。

  - setAttribute():参数为 要设置的特性名 和值

  - removeAttribute():删除元素的特性。

  - attributes属性

创建元素

  - document.createElement()可以创建新元素,参数为要创建元素的标签名。

元素的子节点

  - 元素的childNodes属性中包含了它的所有的子节点

4、Text类型

文本节点由Text类型表示,包含的可以是纯文本内容。

特性: nodeType为3, nodeName为‘#text’, nodeValue为节点所包含的文本。 不支持子节点

创建文本节点

 - document.createTextNode()创建新文本节点。参数为要插入的文本。

规范化文本节点

 - normalize()可以将一个包含多个文本节点的父元素的所有文本节点合并成一个节点。

 - splitText():按照指定的位置分割ndoeValue

5、Comment类型

注释类型,特性为:nodeType为8,nodeName为‘#comment’,nodeValue为注释内容

6、DocumentFragment类型

文档片段在文档中是没有对应的标记的。不过可以包含和控制节点。

document.createDocumentFragment()

7、Attr类型

元素的特性就是Attr类型来表示。特征为: nodeType为2,nodeName为特性的名称,nodeValue为特性的值

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

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

相关文章

  • JS学习笔记19)(E4X)

    摘要:的类型类型创建对象的方法调用构造函数使用字面量将数据直接指定给一个变量。表示解析器应该忽略标记中的处理指令。这三个设置会影响对传入到构造函数中的字符串以及字面量的解析。 showImg(https://segmentfault.com/img/bVbvHVV?w=737&h=593); 1、E4X的类型 1.1 XML类型 1、创建XML对象的方法: (1)调用构造函数: var x ...

    lijinke666 评论0 收藏0
  • 《JavaScript高级程序设计》(3版)读书笔记 10 DOM

    摘要:年月级规范成为的推荐标准,为基本的文档结构及查询提供了接口。这意味着中的对象与原生对象的行为或活动特点并不一致。结果第一条注释就会成为中的第一个子节点。由于跨域安全限制,来自不同子域的页面无法通过通信。 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netsc...

    yearsj 评论0 收藏0
  • JS学习笔记18)(JavaScript与XML)

    摘要:函数接收三个参数上下文节点表达式和可选的命名空间对象。命名空间对象应该是下面这种字面量的形式。使用样式表转换文档跨浏览器使用这个函数接收两个参数要执行转换的上下文节点和文档对象。 showImg(https://segmentfault.com/img/bVbvHVd?w=962&h=496); 本章主要讲解了以下四个问题: 1、将XML解析为DOM文档 跨浏览器把XML解析为DOM文...

    GT 评论0 收藏0
  • JS学习笔记10)(DOM操作技术)

    摘要:动态脚本创建动态脚本有两种方式插入外部文件和直接插入代码。一般来说应该尽量减少访问的次数,因为每次访问,都会运行一次基于文档的查询。所以,可以考虑将从中取得的值缓存起来。 1、动态脚本 创建动态脚本有两种方式:插入外部文件和直接插入Javascript代码。 (1)调用外部文件 function loadScript(url) { var script = documen...

    UCloud 评论0 收藏0
  • 《Head First JavaScript》读书笔记

    摘要:设定的值的时候,即已自动暗示类型。第五章循环自我重复的风险数组用于在单一场所存储多段数据数组的页码称为键,索引只是一种形式特殊的键,它是数值键存储在数组里的数据不一定为相同类型并不要求二维数组具有相同的行数,但是最好保持一致。 ** 简介 **书名:《Head First JavaScript》中文译名:《深入浅出JavaScript》著:Michael Morrison编译:O’R...

    ztyzz 评论0 收藏0

发表评论

0条评论

kamushin233

|高级讲师

TA的文章

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