dom有关知识详细整理

时间 2019-11-08

标签 dom 有关知识详细整理栏目 HTML 繁體版

原文原文链接

节点层次

Node类型

JavaScript 中的全部节点类型都继承自 Node 类型，所以全部节点类型都共享着相同的基本属性和方法。每一个节点都有一个nodeType属性，用以代表节点的类型，一般以数字常量来表示。共有12个数值，javascript

Node.ELEMENT_NODE  1	一个 元素 节点，例如 <p> 和 <div>。

Node.TEXT_NODE     3    文本节点，Element 或者 Attr 中实际的  文字

Node.PROCESSING_INSTRUCTION_NODE	7	一个用于XML文档的 ProcessingInstruction ，例如 <?xml-stylesheet ... ?>
声明。

Node.COMMENT_NODE	8	一个 Comment(注释)节点。

Node.DOCUMENT_NODE	9	一个 Document（文档） 节点。

Node.DOCUMENT_TYPE_NODE	10	描述文档类型的 DocumentType 节点。例如 <!DOCTYPE html>  就是用于 HTML5 的。

Node.DOCUMENT_FRAGMENT_NODE	11	一个 DocumentFragment 节点

复制代码

//其他的已经弃用，请不要使用css

节点关系

父子兄弟关系，和家谱相似看下图：html

每一个节点都有一个 childNodes 属性，其中保存着一个 NodeList 对象。 NodeList 是一种类数组对象，有length属性，但并非数组的实例，java

全部节点都有的最后一个属性是 ownerDocument，该属性指向表示整个文档的文档节点。这种关系表示的是任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。经过这个属性，咱们能够没必要在节点层次中经过层层回溯到达顶端，而是能够直接访问文档节点。node

操做节点

1.appendChild()用于向 childNodes列表的末尾添加一个节点。用于向 childNodes 列表的末尾添加一个节点。编程

2.insertBefore() 方法。这个方法接受两个参数：要插入的节点和做为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点（ previousSibling ）跨域

3.replaceChild() 方法接受的两个参数是：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时由要插入的节点占据其位置。数组

4.removeChild() 方法。移除节点浏览器

5.createElement()建立元素节点bash

6.createTextNode()建立文本节点

7.clone(boolean)复制节点

8.normalize(); Node.normalize() 方法将当前节点和它的后代节点”规范化“（normalized）。在一个"规范化"后的DOM树中，不存在一个空的文本节点，或者两个相邻的文本节点。

9.要使用这几个方法必须先取得父节点（使用 parentNode 属性）。

Document类型

document 对象是 HTMLDocument （继承自 Document 类型）的一个实例，表示整个 HTML 页面。并且， document 对象是 window 对象的一个属性，所以能够将其做为全局对象来访问。

全部浏览器都支持 document.documentElement 和 document.body 属性。

1.1

做为 HTMLDocument 的一个实例， document 对象还有一些标准的 Document 对象所没有的属性。这些属性提供了 document 对象所表现的网页的一些信息。

document.title;

document.URL;

document.domain; 能够进行跨域通讯，例：

两个页面来自不一样的子域名，须要互相访问他们的javascript对象，假如页面A:video.baidu.com,页面B:image.baidu.com ，能够将这个两个页面的document.domain都设置为：baidu.com,它们之间就能够通讯了。
复制代码

document.referrer;

document.forms ，包含文档中全部的<form> 元素

document.images ，包含文档中全部的 <img>元素

document.links ，包含文档中全部带 href 特性的<a> 元素。

document.write()

document.writeln()有换行符（\n）

元素的引用

doucument.getElementById() //id应用

document.getElementsByTagName() //标签引用————同属于HTMLcollection对象，类数组，和nodelist对象相似，有length，可经过下标和item()访问

document.getElementsByName()//name引用————同属于HTMLcollection对象，类数组，和nodelist对象相似，有length，可经过下标和item()访问

document.getElementByClassName()//同属于HTMLcollection对象，类数组，和nodelist对象相似，有length，可经过下标和item()访问

因为使用上面的方法只能经过运行 JavaScript 代码来完成查询操做会带来性能问题，在以后的DOM扩展中，增长了两个方法来代替它们，

querySelector() 和 querySelectorAll()这两个方法是原生API，解析和树查询操做能够在浏览器内部经过编译后的代码来完成，极大地改善了性能。 querySelector()接受一个css或多个选择符，返回与该模式匹配的第一个元素，若是没有找到匹配的元素，返回null。

//取得div元素中的第一个p元素
document.querySelector("div p")
//取得第一个class为contain的div元素
document.querySelector("div.contain")
//取得第一个div元素中的p元素
document.querySelector("div>p")
//取得第一个name值为logn的input元素
document.querySelector("input[name='logn']")
复制代码

querySelectorAll()接受一个或多个css选择符，返回一个nodeList对象的实例

//取得全部的div中的全部p元素
document.querySelectorAll("div p")
//取得全部的class为contain的div元素
document.querySelectorAll("div.contain")
//取得全部的div中其子元素为p的元素
document.querySelectorAll("div>p")
//取得全部的name值为logn的input元素
document.querySelectorAll("input[name='logn']")
复制代码

Element类型

除了 Document 类型以外， Element 类型就要算是 Web 编程中最经常使用的类型了。 Element 类型自身经常使用属性：

id  //惟一标识符
className // 与元素的class相对应，
title  //元素附加信息说明，
lang  //元素内容的语言代码，不多使用
复制代码

取得特性

getAttribute()//获取特性  getAttribute("id")

setAttribute()//设置特性  setAttribute("id")

removeAttribute()//移除特性 removeAttribute("id") 
复制代码

//建议不要使用自定义特性设置，

Text类型

normalize(),规范化文本节点，因而就催生了一个可以将相邻文本节点合并的方法。这个方法是由 Node 类型定义的（于是在全部节点类型中都存在），名叫 normalize() ，在文本节点的父元素上使用。

splitText()，分割文本节点

这个方法会将一个文本节点分红两个文本节点，即按照指定的位置分割nodeValue值。原来的文本节点将包含从开始到指定位置以前的内容，新文本节点将包含剩下的文本。这个方法会返回一个新文本节点，该节点与原节点的parentNode 相同。

Comment类型

Comment 类型与 Text 类型继承自相同的基类，所以它拥有除 splitText() 以外的全部字符串操做方法。与 Text 类型类似，也能够经过 nodeValue 或 data 属性来取得注释的内容。

<div id="myDiv"><!--A comment --></div>
var div = document.getElementById("myDiv");
var comment = div.firstChild;
alert(comment.data); //"A comment"
alert(comment.nodeValue);//'A comment'
复制代码

HTML5扩展

getElementsByClassName() //getElementsByClassName() 方法接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的全部元素的NodeList。传入多个类名时，类名的前后顺序不重要。

classList属性

在操做类名时，须要经过 className 属性添加、删除和替换类名。ClassList属性使用起来很是的简便，这个 classList 属性是新集合类型 DOMTokenList 的实例。与nodeList相似，有length属性，可使用item()方法，也可使用方括号语法

add(value) ：将给定的字符串值添加到列表中。若是值已经存在，就不添加了。

//添加"current"类
复制代码

div.classList.add("current");

contains(value) ：表示列表中是否存在给定的值，若是存在则返回 true ，不然返回 false 。
//肯定元素中是否包含既定的类名
复制代码

if (div.classList.contains("bd") && !div.classList.contains("disabled")){ //执行操做 )

remove(value) ：从列表中删除给定的字符串。

//删除"disabled"类
`div.classList.remove("disabled");`

toggle(value) ：若是列表中已经存在给定的值，删除它；若是列表中没有给定的值，添加它。

`div.classList.toggle("user");`
//迭代类名
`for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}`
复制代码

焦点管理

HTML5 也添加了辅助管理 DOM 焦点的功能。首先就是document.activeElement属性，这个属性始终会引用DOM中当前得到了焦点的元素。

document.hasFocus()方法，这个方法用于肯定文档是否得到了焦点。

自定义数据属性

HTML5规定能够为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性能够任意添加、随便命名，只要以 data- 开头便可。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

//本例中使用的方法仅用于演示
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢？
if (div.dataset.myname){alert("Hello, " + div.dataset.myname);}
复制代码

若是须要给元素添加一些不可见的数据以便进行其余处理，那就要用到自定义数据属性。在跟踪连接或混搭应用中，经过自定义数据属性能方便地知道点击来自页面中的哪一个部分。

scrollIntoView() 方法

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。具体用法能够查看MDN

children属性

children用来处理ie浏览器和其它浏览器在处理文本节点空白符存在差别化的问题。除此以外和childNode没有什么区别。

Node.contains()返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点。

下面的函数用来检查一个元素是不是body元素的后代元素且非body元素自己.

return (node === document.body) ? false : document.body.contains(node);
}
复制代码