DOM API

赵春朋发布于2019-08-22 17:32 / 1912人阅读

摘要：简单记录请看阮一峰的意思是我使用的是文档对象模型在文档与对象做一个模型映射就是文档对象模型把文档变成对象的模型就是元素文本是标签的父元素只要看到一个节点浏览器就构造出来一个对应的对象放在内存中页面中的节点通过构造函数变成对象想要操作节点就操

DOM API

简单记录

请看阮一峰的DOM API
意思是我使用的是html5

Document Object Model文档对象模型
在文档与对象做一个模型映射,就是文档对象模型

把文档变成对象的模型.就是DOM

Element元素, Text 文本.
Document是html标签的父元素.

只要看到一个节点,浏览器就构造出来一个对应的对象,放在内存中.

页面中的节点通过构造函数变成对象,想要操作节点,就操纵对象相应的API就行了

document继承node,原型链

底下几个接口去MDN看详细的,或者需要用了就去看MDN

1.Node接口 1.1属性

Node派生于Object
sibling,兄弟姐妹
属性

childNodes,firstChild,innerText,lastChild,nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent

注意:

nextSibling,previousSibling会获取到文本节点.使用nextElementSibling,previousElementSibling

innerText,textContent有细微区别

nodeType,1表示元素,3表示文本

nodeName

1.2方法

cloneNode()

方法（如果一个属性是函数，那么这个属性就也叫做方法；换言之，方法是函数属性）

appendChild()//加儿子
cloneNode()

注意:

深拷贝:递归拷贝里面所有的内容

div.cloneNode(true);深拷贝,不写或者false就是浅拷贝
contains()
hasChildNodes()
insertBefore()

isEqualNode()//只要长得一样就行,内存地址不一样没关系
isSameNode()//等价于===,完全相等,包括地址,同一个

removeChild()//移除孩子,但是还在内存中
replaceChild()//交换孩子

normalize() // 常规化
是

将两个文本节点变成一个

搞清楚英文单词的意思就知道用法
如果发现知道英文后依然不明白用法，看 MDN 的例子即可，如 normalize

2.document接口

document继承node,原型链

2.1属性

body
characterSet//字符编码
childElementCount//子标签数量
children
doctype
documentElement
domain//获取域名
head
hidden
images
links//获取所有的a标签
location//获取当前地址
onxxxxxxxxx//监听事件
origin
plugins//时候开始起flash插件
readyState//是否下载完了
**referrer**//引荐,通过引荐拒绝为其他网站提供服务.引荐就是从那个网站打开的这个请求.可以用来只能在自己的网站请求,其他地方直接打开这个请求是打不开的,具体看视频,防止把这个网站当图床
scripts
scrollingElement//正在滚动的元素
styleSheets
title
visibilityState//查看当前页面是都正在被用户浏览,如果用户打开了这个页面,但是不在看当前页面,这个就是false

2.2方法：

close()//关闭文档,不用
createDocumentFragment()
createElement()
**注意**:div1.innerText="hello"会把div里面所有的元素去除掉,只剩下hello文本.所以要用div.appendchild(document.createTextNode("hello")),这样才不会覆盖

createTextNode()
execCommand()//执行命令,当希望插入使用富文本编辑器的时候使用这个
exitFullscreen()//退出全屏
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
hasFocus()
open()
**querySelector()**//通过选择器选择元素.得到的都是伪数组
querySelectorAll()
registerElement()
write()
writeln()

3.Element 的接口

看MDN
classList
innerHtml可以读取html格式.标签会显示.出于安全问题尽量不要用.
innerText只是文本

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

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

浅析SAX,DOM,JAXP,JDOM与DOM4J之间的关系

摘要：通过解析器获取文档对象后，开发人员可以很方便的对其进行操作，如获取更元素，获取一个子元素，增加子元素，移除子元素。它并没有为解析提供任何新功能，但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器，默认使用随包一起发行的。 showImg(/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿众所周知，SAX与DOM是JAVA中两大核心X...

妤锋シ 2019-08-14 14:42 评论0 收藏0
浅析SAX,DOM,JAXP,JDOM与DOM4J之间的关系

摘要：通过解析器获取文档对象后，开发人员可以很方便的对其进行操作，如获取更元素，获取一个子元素，增加子元素，移除子元素。它并没有为解析提供任何新功能，但是它为在获取与解析器提供了更加直接的途径。自身不包含解析器，默认使用随包一起发行的。 showImg(https://segmentfault.com/img/bVDhQE?w=888&h=220); 文章最初发表于我的个人博客非典型性程序猿...

JasinYip 2019-08-27 10:52 评论0 收藏0
重学前端学习笔记（二十三）--狭义的文档对象DOM

摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的...

Guakin_Huang 2019-08-26 13:53 评论0 收藏0
重学前端学习笔记（二十三）--狭义的文档对象DOM

摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的...

wuaiqiu 2019-08-30 10:58 评论0 收藏0
重学前端学习笔记（二十三）--狭义的文档对象DOM

摘要：事件触发和监听事件相关。文档是一个由标签嵌套而成的树形结构，因此，也是使用树形的对象模型来描述一个文档。节点的写法三是树继承关系的根节点。七表示一个上的范围，这个范围是以文字为最小单位的。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的...

AlanKeene 2019-08-02 15:08 评论0 收藏0