DOM中节点

规定

整个文档是一个文档节点

每个 HTML 标签是一个元素节点

包含在 HTML 元素中的文本是文本节点

每一个 HTML 属性是一个属性节点

注释属于注释节点

node节点

节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树(或节点树)。

HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。

树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

文档树

<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

上面所有的节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。

举例, 和 的父节点是 节点,文本节点 "Hello world!" 的父节点是

节点。

大部分元素节点都有子节点。

比方说, 节点有一个子节点:

原文地址:https://www.cnblogs.com/coderly2017/p/8476440.html

时间: 2024-10-29 01:17:16

DOM中节点的相关文章

JS学习之DOM节点的关系属性封装、克隆节点、Dom中Style常用的一些属性等小结

JS DOM节点: 在JS DOM中节点的关系被定义为节点的属性: 通常有以下几种节点之间的关系: (这里的关系是所有浏览器都支持的) parentNode    父节点 childNodes    子节点 firstChild    父节点里的第一个子节点 lastChild     父节点里的最后一个子节点 nextSibling    与子节点并列的下一个兄弟节点 previousSibling   与子节点并列的上一个兄弟节点 火狐与谷歌支持而ie8不支持的节点关系有: previous

DOM中元素节点、属性节点、文本节点

DOM中有12中节点,但最常用到的是元素节点,属性节点,文本节点. 元素节点的节点类型(nodeType)是1: 属性节点的节点类型(nodeType)是2: 文本节点的节点类型(nodeType)是3. 元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text 对于文本节点,nodeValue 属性包含文本. 对于属性节点,nodeValue 属性包含属性值. nodeValue 属性对于文档节点和元素节点是不可用的. n

javascript之解决dom中存在的空白节点问题

下面有一段html文档 <body> <h1>Introduction to the DOM</h1> <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p> <ul> <li id="everywhere">It can be found everywhere.

DOM中的节点属性

我们在做web测试时,适当了解前端的知识有助于我们测试工作中bug的定位,同时也有助于自动化测试中的元素定位.下面我简单写一下关于JavaScript中的DOM的节点元素. DOM ,文件对象模型,主要是针对HTML 和XML文档中的一个api(应用程序接口).DOM定义了访问和处理HTML文档的标准方法,描绘了一个层次化的节点树.DOM将HTML文档呈现出元素.属性和文本的树形结构. 在DOM中,每一个节点都是一个对象.DOM节点都有三个重要的属性: 1. nodeName : 节点的名称 2

javascript DOM中的节点层次和节点类型概述

针对JS高级程序设计这本书,主要是理解概念,大部分内容源自书内.写这个主要是当个书中的笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的代码. 另外这篇不包括DOM2,DOM3的内容 DOM 文档对象模型,针对HTML和XML文档的一个API.描绘了一个层次化的结点树,循序开发人员添加,移除修改页面上的一部分. 1节点层次 DOM把文档描绘成一个由多层节点构成的结构.节点有不同的类型.节点之间的关系构成了层次. 文档节点是每个

JQ中的clone()方法与DOM中的cloneNode()方法

JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(deep);  其接收一个可选参数"deep",为布尔类型,默认是false. 当设置为true,克隆当前节点,属性及当前节点的后代.若设置为false,仅仅克隆当前元素节点本身. 扩展:  使用cloneNode()方法,当被克隆的节点绑定了事件处理程序,事件处理程序是否会被一同克隆,这个我

DOM之节点层次

1.1 Node类型 DOM1级定义了一个Node接口,该接口将由DOM中的所有节点类型实现.这个Node接口在JS中是作为Node类型实现的:除了IE之外,其他浏览器可访问这个类型.JS中的所有节点类型都继承自Node类型.注意:不是所有节点类型都受到了Web浏览器的支持. 每个节点都有一个childNodes属性,其中保存着一个NodeList对象.NodeList是一种类数组对象,并不是Array的实例.它实际是基于DOM结构动态执行查询的结果.除了在IE8-中,可以使用Array.pro

JavaScript HTML DOM 元素(节点)

JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素. 实例 <div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.<

DOM中的动态NodeList与静态NodeList

GitHub版本: https://github.com/cncounter/translation/blob/master/tiemao_2014/NodeList/NodeList.md 副标题: 为何getElementsByTagName()比querySelectorAll()快100倍 昨天,我在雅虎的同事 Scott Schiller (斯科特·席勒, 同时也是SoundManager创造者) 发Twitter询问为何getElementsByTagName("a") 在