JS基础 - DOM

目录

DOM

Node 类型

Document类型

Element类型

---

 

DOM

文档对象模型，浏览器提供给js操作html文档的API

兼容性 IE 程序员噩梦

                                                    Object（构造函数）

                                                     Node（构造函数）

Document(文档节点) Element（元素节点） Text（文本节点） Comment（注释节点）

document d(元素节点)

Node 类型

Node.prototype

属性

nodeType 表示节点的类型

Document--> 9;Element -->1;TextNode -->3;Comment--> 8

document 是Document构造函数的实例

document.body是Element构造函数的实例

document.body.firstChild 是TextNode构造函数的实例

nodeName 表示节点的名字

nodeValue 该属性取决于节点类型，如果是元素类型，值有null

childNodes 保存一个NodeList对象，NodeList是一种类数组对象用来保存一组有序的节点，NodeList是基于DOM结构动态执行查询的结果，DOM结构变化可以自动反应到NodeList对象中。访问时可以通过中括号访问，也可以通过item()方法访问。可以使用slice方法将NodeList转换为数组

parentNode 父节点

previousSibling 兄弟节点中的前一个节点

nextSibling 兄弟节点中的下一个节点

firstChild childNodes列表中的第一个节点

lastChild childNodes列表中的最后一个节点

ownerDocument 指向表示整个文档的文档节点。任何节点都属于它所在的文档，任何节点都不能同时存在于两个或更多个文档中。

方法： hasChildNodes() 在包含一个或多个子节点的情况下返回true

操作节点

注意：以下四个方法都是需要父节点调用

appendChild() 向childNodes列表末尾添加一个节点。返回新增的节点。关系更新如果参数节点已经为文档的一部分，位置更新而不插入，dom树可以看做是由一系列的指针连接起来的，任何DOM节点不能同时出现在文档中的多个位置

insertBefore() //第一个参数：要插入的节点；

                        第二个参数：作为参照的节点；

                        被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。

                        如果第二个参数为null将会将该节点追加在NodeList后面

replaceChild() //第一个参数：要插入的节点；

                        第二个参数：要替换的节点；

                        要替换的节点将由这个方法返回并从文档树中被移除，

                        同时由要插入的节点占据其位置

removeChild() //一个参数，即要移除的节点。

                        移除的节点将作为方法的返回值。

                        其他方法,任何节点对象都可以调用。

其他方法

cloneNode 克隆一个节点，不会克隆子节点，如果想要克隆子节点，添加参数true

normalize() 处理文档树中的文本节点，由于解析器的实现或DOM操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点，当在某个节点上调用了该方法，会删除空白节点，会找到相邻的两个文本节点，并将他们合并为一个文本节点。

Document类型

Document.prototype

都可以继承Node中的所有属性和方法

document

属性 文档子节点

documentElement         始终指向HTML页面中的元素。

body                                 直接指向元素

doctype                            访问, 浏览器支持不一致，很少使用

title                                   获取文档的标题

URL                                 取得完整的URL

domain              取得域名，并且可以进行设置，在跨域访问中经常会用到。服务器测

referrer              取得链接到当前页面的那个页面的URL，即来源页面的URL。

images               获取所有的img对象，返回HTMLCollection类数组对象

forms                 获取所有的form对象，返回HTMLCollection类数组对象

links                 获取文档中所有带href属性的元素

方法

查找元素

getElementById() 参数为要取得元素的ID，如果找到返回该元素，否则返回null。如果页面中多个元素的ID值相同，只返回文档中第一次出现的元素。如果某个表单元素的name值等于指定的ID，该元素也会被匹配。

getElementsByTagName() 参数为要取得元素的标签名，返回包含另个或者多个元素的NodeList，在HTML文档中该方法返回的是HTMLCollection对象，与NodeList非常类似。可以通过[index/name],item(),namedItem(name)访问

返回类数组对象

getElementsByName() 参数为元素的name,返回符合条件的NodeList

getElementsByClassName() 参数为一个字符串，可以由多个空格隔开的标识符组成。当元素的class属性值包含所有指定的标识符时才匹配。HTML元素的class属性值是一个以空格隔开的列表，可以为空或包含多个标识符。

Element类型

Element.prototype

属性 HTML元素特有的属性

id                         元素在文档中的唯一标识符

title                         有关元素的附加说明信息

className                 与元素class特性对应

src                                 img元素具有的属性

alt                                 img元素具有的属性

lang                         元素内容的语言代码，很少使用！

dir                         语言方向，ltr,rtl 左到右，右到左、

style                         对象

方法

取得自定义属性

getAttribute() 参数为实际元素的属性名，class,name,id,title,lang,dir一般只有在取得自定义特性值的情况下，才会用该方法。大多数直接使用属性进行访问，比如style,onclick

设置属性

dom.className = "one"

dom.setAttribute("className","one");

setAttribute() ：两个参数，第一个参数为要设置的特性名，第二个参数为对应的值。如果该值存在，替换

移除属性 removeAttribute() 移除指定的特性

attributes属性，其中包含了一个NamedNodeMap,与NodeList类似

getNamedItem(name) 返回nodeName属性等于name的节点,再访问nodeValue removeNamedItem(name) 从列表中删除nodeName属性等于name的值 setNamedItem(attrNode) 向列表中添加一个节点

var attr=document.createAttribute(”title“); attr.nodeValue=”test“; btn.attributes.setNamedItem(attr);

item(index) 返回位于数字index位置处的节点

创建元素

document.createElement() 参数为要创建元素的标签名。

元素的子节点

• item1

• item2

ie8及以下版本浏览器 2个子节点

其他浏览器 5个子节点

特殊特性

style 通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问返回一个对象，由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性

onclick 类似的事件处理程序，通过getAttribute()访问时，返回相应代码字符串；访问onclick属性时，返回一个javascript函数

作为文档树的文档

将文档看做是Element对象树，忽略文档Text,Comment节点。Element中的属性

children 类似于childNodes,返回NodeList对象，但是该对象中仅包含Element对象

firstElementChild 第一个孩子元素节点

lastElementChild 最后一个孩子元素节点

nextElementSibling 下一个兄弟元素节点

previousElementSibling 上一个兄弟元素节点

childElementCount 子元素的数量，返回值和children.length值相等

元素内容

innerHTML                 返回元素内容，包括html标签

innerText                     元素内部的文本，去除回车和换行

textContent                 元素内部的文本，不去除空格和回车