DOM整理

peixn 发布于2019-08-20 18:34 / 1200人阅读

摘要：元素节点类型节点类型数值元素节点属性节点文本节点文档节点和属性元素节点的始终为，始终保存元素的标签名。返回类数组对象。

1.元素节点类型

节点类型	数值
元素节点	1
属性节点	2
文本节点	3
文档节点	9

2.nodeName和nodeValue属性
元素节点的nodeValue始终为null，nodeName始终保存元素的标签名。
3.childNodes
element.childNodes返回类数组对象。
4.Document类型

属性	值
nodeType	9
nodeName	"#document"
nodeValue	null
parentNode	null

5.document.referrer // 取得来源页面的URL
6.Element类型

属性	值
nodeType	1
nodeName	元素标签名
nodeValue	null
parentNode	Document和Element
子节点	Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference
attributes	标签属性集合

访问元素标签名，也可以通过tagName访问

7.Text类型

属性	值
nodeType	3
nodeName	"#text"
nodeValue	节点所包含的文本
parentNode	一个Element
子节点	无

附：汇总

方法	说明
element.childNodes	获取元素所有子节点
element.nodeType	获取元素节点类型
element.nodeName	获取元素节点名称
element.parentNode	获取元素父节点
element.previousSibling	获取元素上一个兄弟节点
element.nextSibling	获取元素下一个兄弟节点
element.firstChild	获取元素第一个子节点
element.lastChild	获取元素最后一个子节点
element.hasChildNodes()	获取元素是否存在子节点，存在返回true
element.ownerDocument	获取整个文档的文档节点document
element.appendChild(newNode)	向元素最后位置添加子元素，如果newNode已经是文档中一部分，那么只是该节点变成最后一个子节点
element.insertBefore(newNode, null)	向元素指定位置(参照元素前)添加子元素，第一个参数为新元素，第二个参数为参照元素，如果第二个参数为null，那么该方法相当于appendChild
element.replaceChild(newNode, oldNode)	替换子节点
element.removeChild(someNode)	移除子节点，该方法返回被移除的节点
element.cloneNode(true)	克隆节点，如果方法内参数为true，则复制节点及其所有子节点，如果为false，则复制节点
element.setAttribute()	设置特性
element.removeAttribute()	移除特性
element.getAttribute()	获取特性
document.createTextNode("hello world!")	创建文本节点
document.createElement("div")	创建元素节点
document.createDocumentFragment()	创建文档片段，该片段继承了Node所有方法，通常用来执DOM操作

服务器托管专线服务机柜整理整理收集整理资料颜色整理

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

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

DOM知识整理

摘要：继承接口对象不仅实现了接口，也实现了接口，用来标识当前窗口内的文档节点。继承接口描述了所有相同种类的元素所普遍具有的方法和属性。由于工作中一直在用框架来解决问题，在平时对dom的关注也比较少（特别像angular这种自己封装了一层视图层的框架，并不建议直接操作DOM），所以dom相关的知识也忘的差不多了,这次做公司产品的官网，没有太多的交互和功能，直接用了原生js，正好借此整理一下遗...

huayeluoliuhen 2019-08-23 13:51 评论0 收藏0
HTML DOM 知识点整理（一）—— Document对象

摘要：提示对象是对象的一部分，可通过属性对其进行访问。方法返回布尔值，用于检测文档或文档内的任一元素是否获取焦点。布尔值，指定事件是否在捕获或冒泡阶段执行。向元素添加事件句柄移除元素的事件句柄方法级元素参数类型描述对象必须。一、DOM对象 DOM对象整体包括： HTML DOM Document对象 HTML DOM 元素对象 HTML DOM 属性对象 HTML DOM 事件对象 HTML D...

xiaochao 2019-04-23 13:09 评论0 收藏0
DOM疑惑点整理（三）

摘要：好的，这些是众所周知的。和两者最大区别就是是否会改变调用它们的节点自身，类似上面与的其二中所描述。并未写入规范，不建议使用，而且会导致调用它的节点自身消失。两者可能因为浏览器不同，输出的文本格式略有差别 innerHTML和outerHTML 先说一个几乎众所周知的，innerHTML和outerHTML中的内容都会被解析为DOM子树，其二就是， let txt = doc...

高胜山 2019-08-22 16:34 评论0 收藏0
DOM疑惑点整理（二）内联、嵌入、外联样式访问

摘要：内联样式外联样式样式属性，写在外部文件，通过链接导入。内联样式注意点样式的应用，采取就近原则，因此一般情况优先级是内联样式嵌入样式外联样式。中有新的方式去查看完整的属性某元素内联外联嵌入样式合起来计算后的属性。访问的style属性为空？有时候，直接通过某元素的style属性去查看相关信息时，会发现查看到的是空的属性。原因很简单，style属性只能访问内联样式，而你把css写在了外部...

Lucky_Boy 2019-08-22 16:19 评论0 收藏0
DOM疑惑点整理（三）

摘要：好的，这些是众所周知的。和两者最大区别就是是否会改变调用它们的节点自身，类似上面与的其二中所描述。并未写入规范，不建议使用，而且会导致调用它的节点自身消失。两者可能因为浏览器不同，输出的文本格式略有差别 innerHTML和outerHTML 先说一个几乎众所周知的，innerHTML和outerHTML中的内容都会被解析为DOM子树，其二就是， let txt = doc...

lucas 2019-08-02 10:15 评论0 收藏0