摘要:派生自,它包括,如果一个是的,那它的子类也拥有。节点的最小组成单位就是节点。树就是由不同类型的节点组成。每个节点可以看成是树上的叶子。节点节点和接口,部署了接口。凡是这三类节点接口,都可以使用下面四个方法。
Node派生自Object,它包括Element、Text、Document(html)、Coment,如果一个 API 是Node的,那它的子类也拥有。
DOM节点DOM的最小组成单位就是节点(node)。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。
在DOM中,节点的类型一共有7种 属性: innerText添加文本,会覆盖原有文本 nodeName获取节点名称都是大写,svg是特例,小写 textContent会获取所有元素的内容,包括、style,而innerText不会 方法: 属性: 方法: 属性: 用于处理子节点(包含但不限于Element子节点)。Element节点、DocumentType节点和CharacterData接口,部署了ChildNode接口。凡是这三类节点(接口),都可以使用下面四个方法。 (1)remove()移除当前节点 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。 转载请注明本文地址:https://www.ucloud.cn/yun/94980.html
Document:整个文档树的顶层节点;
DocumentType:dotype标签(比如:)
Element:网页的各种HTML标签(比如:
Attribute:网页元素的属性(比如:id="id" class="class" type="text")
Text:标签之间或标签包含的文本
Comment:注释
DocumentFragment:文档片段
Node 的接口
DOM API 记住下面的英文单词后各自组合就是 DOM 提供的 APIchild/children/parent
node
first/last
next/previous
sibling/siblings
type
value/text/content
inner/outer
element
childNodes获取所有的子元素(会获取到回车)
children获取所有的子标签,没有文本
firstChild第一个元素,会有文本
lastChild最后一个元素,会有文本
firstElementChild,第一个标签,没有文本
previousSibling上一个元素,会有文本
nextSibling下一个元素,会有文本
previousElementSibling下一个标签,没有文本
nextSibling下一个元素,会有文本
nodeType获取节点类型,1是元素节点,3是文本节点,11是DocumentFragment
appendChild()添加一个子元素
cloneNode()接受参数true,深复制,有多少复制多少;不传参数,只复制最外面的一个
contains()表示一个元素是否包含另一个元素
hasChildNodes()表示一个元素是否有子元素,返回Boolean
insertBefore()把一个元素查到另一个元素前面
isEqualNode()相等,如果是两个一样的元素就是true
isSameNode()相同,如果是同一个元素就是true
removeChild()移除子元素,但依然在内存中,只是从页面中移除
replaceChild()交换一个子元素
normalize() // 常规化var wrapper = document.createElement("div");
wrapper.appendChild( document.createTextNode("Part 1 ") );
wrapper.appendChild( document.createTextNode("Part 2 ") );
// At this point, wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "
wrapper.normalize();
// Now, wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2 "
Document接口是Document特有的,window.document所符合的就是这个接口,document是html的父元素,但html还是根元素
body获取body元素
characterSet获取字符编码
childElementCount子标签的数量,无符号长整型数字
children
doctype
documentElementhtml元素
domain
fullscreen
head
hidden
images
links
location
onxxxxxxxxx
origin
plugins检测插件
readyState
referrer引荐
scripts
scrollingElement获取正在滚动的元素
styleSheets
title
visibilityState页面是否被显示,正在看页面,返回true
close()关闭文档
createDocumentFragment()
createElement()
createTextNode()创建一个文本节点
execCommand()写一个富文本编辑器时可以用到
exitFullscreen()退出全屏
getElementById()
getElementsByClassName()
getElementsByName()通过name属性
getElementsByTagName()通过标签名
getSelection()回去用户选中的文本
hasFocus()用户是否Focus到上面
open()
querySelector()通过选择器获取,返回一个选择器(数组的形式,不过是伪数组)
querySelectorAll()通过选择器获取,返回所以选择器(数组的形式,不过是伪数组)
write()写
writeln()写一行
innertext用户输入啥就是啥
innerHTML如果用户输入标签名会写入HTML
(2)before(), (3)after() , (4)replaceWith()
摘要:通过解析器获取文档对象后,开发人员可以很方便的对其进行操作,如获取更元素,获取一个子元素,增加子元素,移除子元素。它并没有为解析提供任何新功能,但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器,默认使用随包一起发行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿 众所周知,SAX与DOM是JAVA中两大核心X...
摘要:通过解析器获取文档对象后,开发人员可以很方便的对其进行操作,如获取更元素,获取一个子元素,增加子元素,移除子元素。它并没有为解析提供任何新功能,但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器,默认使用随包一起发行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿...
摘要:事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构,因此,也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围,这个范围是以文字为最小单位的。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的...
摘要:事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构,因此,也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围,这个范围是以文字为最小单位的。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的...
摘要:事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构,因此,也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围,这个范围是以文字为最小单位的。 笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的...
阅读 2980·2021-11-23 10:12
阅读 2705·2021-11-23 09:51
阅读 2052·2021-11-15 11:37
阅读 1392·2019-08-30 15:55
阅读 1975·2019-08-29 15:40
阅读 1177·2019-08-28 18:30
阅读 1658·2019-08-28 18:02
阅读 2654·2019-08-26 12:00