DOM结点

结点类型

Document               文档节点        整个文档(window.document)
DocumentType        文档类型节点   文档的类型(比如<!DOCTYPE html>)
Element                  元素节点        HTML元素(比如<body>、<a>等)
Attribute                 属性节点        HTML元素的属性(比如class=”right”)
Text                       文本节点        HTML文档中出现的文本
DocumentFragment 文档碎片节点   文档的片段

结点属性
(1)ownerDocument
返回当前节点所在的顶层文档对象,即document对象。document对象本身的ownerDocument属性,返回null。
(2)nextSibling
返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点,则返回null。
(3)previousSibling
previousSibling属性返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点,则返回null。
(4)parentNode
返回当前节点的父节点。对于一个节点来说,它的父节点只可能是三种类型:element节点、document节点和documentfragment节点。
(5)parentElement
返回当前节点的父Element节点。如果当前节点没有父节点,或者父节点类型不是Element节点,则返回null。

(6)textContent
返回当前节点和它的所有后代节点的文本内容。
(7)nodeValue
返回或设置当前节点的值,格式为字符串。但是,该属性只对Text节点、Comment节点、XML文档的CDATA节点有效,其他类型的节点一律返回null。

(8)childNodes
返回一个NodeList集合,成员包括当前节点的所有子节点。
(9)firstChild
返回当前节点的第一个子节点,如果当前节点没有子节点,则返回null。
(10)lastChild
返回当前节点的最后一个子节点,如果当前节点没有子节点,则返回null。

结点方法
(1)appendChild()
接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。
(2)hasChildNodes()
结合firstChild属性和nextSibling属性,可以遍历当前节点的所有后代节点。

(1)cloneNode()
用于克隆一个节点。它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。
(2)insertBefore()
用于将某个节点插入当前节点的指定位置。
(3)removeChild()
接受一个子节点作为参数,用于从当前节点移除该节点。它返回被移除的节点。
(4)replaceChild()
用于将一个新的节点,替换当前节点的某一个子节点

(5)contains()
接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。
(6)compareDocumentPosition()
用法与contains方法完全一致,返回一个7个比特位的二进制值,表示参数节点与当前节点的关系。
(7)isEqualNode()
返回一个布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。
(8)normalize()
用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。

时间: 2024-11-13 09:02:15

DOM结点的相关文章

React系列文章:无状态组件生成真实DOM结点

在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name}) { return <div>{`hello ${name}`}</div>; }; const App = <Greeting name="scott"/>; console.log(App); ReactDOM.render(App, docum

HTML、XML 等 Dom 结点类解析库Jsoup

Jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据. 特点: HTML.XML.自定义DOM格式文本解析: 可操作HTML元素.属性.文本: 适用于采集解析网站HTML: DOM解析功能强大. 开源库jsoup-1.8.1.jar,基本用法: 1 package com.zhang.jsoupdemo; 2 3 import android.os.Enviro

从Chrome源码看浏览器如何构建DOM树

.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 15px; text-indent: 2em } #colorbox.crayon-colorbox,#cboxOverlay.crayon-colorbox,.crayon-colorbox #cboxWrapper { position: absolute; top: 0; left: 0; z-

JavaScript DOM操作及扩展

什么是DOM??? DOM(Document Object Model  文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口). 注意,IE中的所有DOM对象都是以COM(组件对象模型)对象的形式实现的.IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致. COM对象是遵循COM规范编写.以Win32动态链接库(DLL)或可执行文件(EXE)形式发布的可执行二进制代码,能够满足对组件架构的所有需求.DOM定义了一个Node接口,这个接口在JavaScri

dojo 学习笔记之一 dom.byId dojo.byId registry.byId 的区别

在dojo中,除了沿用Dom结点, dojo 还自定义了一类结点用"dojoType" 进行标识. dojo 称这些结点为widget. 当检测到HTMl文档中某个标签定义了dojoType 属性之后,dojo会调用dojo包中相应的 js 及 css 文件对这个结点进行渲染. 从而这个结点元素就会相应地显示出具有dojo特色的样式及功能. 如此说来, dom.byId 跟 dojo.byId 获取到的就是普通的HTMl文档结构树中的某个结点元素,以下简称dom结点, 而 regist

传统的DOM渲染方式?

1.什么是DOM渲染? DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程. 2.DOM渲染的演化过程,大致可以分为可以分为三个阶段: 纯后端渲染: DOM树的生成完全是在后端服务器中完成的,后端服务器的程序会把需要的数据拼合成一个类似于前端DOM节点组成的DOM树,并转化成字节流作为HTTP Response的body返回浏览器 纯前端渲染: 前端渲染把DOM生成的主体逻辑都放在前端,后端之后返回一个框架的DOM结构,然后由js代码把页面的主题渲染到框架中.可以解决后端渲染中出现的

【转】console.log 用法

转自http://www.cnblogs.com/ctriphire/p/4116207.html 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方.可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上co

浏览器的渲染原理简介

原文转自:http://kb.cnblogs.com/page/178445/ 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻译成了中文.为什么我还想写一篇呢?因为两个原因, 1)这篇文章太长了,阅读成本太大,不能一口气读完. 2)花了大力气读了这篇文章后可以了解很多,但似乎对工作没什么帮助. 所以,我准备写下这篇文章来解决上述两个问题.希望你能在上班途中,或是坐马桶时就能读完,并能从中学会一些能用在工作上的东西. 浏览

一看就懂的ReactJs入门教程(精华版)

现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJS的风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用