写业务时不常用的DOM，难道就不重要了吗？

枫913
137 阅读7分钟

Node类型

1.Node节点属性

  • nodeType: 节点类型（12种）

  • nodeName: 节点标签名

  • nodeValue: 节点标签内容

  • childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList类数组对象


var firstChild = someNode.childNodes[0];// 第1个子节点

var secondChild = someNode.childNodes.item(1);// 第2个子节点

var count = someNode.childNodes.length; // 子节点个数

  • firstChild: 指向第一个子节点

  • lastChild: 指向最后一个子节点

  • parentNode: 指向该节点的父节点

  • previousSibling: 指向上一个兄弟节点

  • nextSibling: 指向下一个兄弟节点

  • hasChildNodes: 当前节点有子节点则返回true

  • ownerDocument: 指向整个文档的文档节点

2.Node方法

appendChild(Node)

参数：接受1个参数，需要插入的节点

说明：用于向childNodes列表的末尾添加一个节点，如果插入的节点已经是文档的一部分则结果为该节点从原来的位置转移到新位置

返回值：Node

insertBefore(Node1,Node2)

参数：接受2个参数，Node1代表需要插入的节点，Node2代表参照的节点

说明：在Node2前插入Node1节点

返回值：Node1

replaceChild(Node1,Node2)

参数：接受2个参数，Node1代表需要插入的节点，Node2代表需要被替换的节点

说明：将Node1所有关系指针都会从被替换的Node2复制过来，此时Node2仍然在文档中，只是在文档中没有了位置

返回值：Node1

removeChild(Node)

参数：接受1个参数，需要移除的节点

说明：将Node从原有位置移除，和replaceChild一样，仍在文档中

返回值：Node

Node.cloneNode(isDeep)

参数：接受1个参数，布尔值类型

说明：用于创建调用这个方法的节点(Node)的一个完全相同的副本，isDeep为true则代表深复制，复制该节点及其整个子节点树，isDeep为false则代表浅复制，只复制该节点本身

返回值：Node

Node.normalize()

参数：无

说明：在Node的后代节点中查找两种情况：1。是否会出现文本节点不包含文本，2.接连出现两个文本节点，如果找到了空文本节点则删除它，如果找到相邻的文本节点，则将它们合并为一个文本节点；

Document类型

nodeType的值为9；

nodeName的值为"#document";

nodeValue的值为null;

parentNode的值为null;

ownerDocument的值为null;

文档子节点


var html = document.documentElement; // 取得对<html>的引用

var body = document.body; // 取得对<body>的引用

var doctype = document.doctype; // 取得对<!DOCTYPE>的引用

文档信息

document.title

说明：取得文档标题

document.URL

说明：取得完成的url

document.referrer

说明：取得来源页面的url

document.domain

说明：取得域名，且当页面1内嵌套一个页面2，页面1子域名是www.baidu.com，页面2子域名是xx.baidu.com，那么两个页面在浏览器中因为同源策略会有跨域限制，来源于不同子域的页面不能通过JavaScript通信，此时可以修改domain，将两个页面的子域名都修改为baidu.com,此时两个页面子域名一致，则无跨域限制；此时domain还有个限制，domain改为baidu.com后则无法改为www.baidu.com了


document.domain = "baidu.com" // 松散的（成功）

document.domain = "www.baidu.com" // 紧绷的（报错）

document.domain = "xx.baidu.com" // 紧绷的（报错）

Element类型

nodeType的值为1；

nodeName的值为元素的标签名;

nodeValue的值为null;

parentNode可能是Document或Element;

Text类型

nodeType的值为3；

nodeName的值为"#text";

nodeValue的值为节点所包含的文本;

parentNode是一个Element;

Comment类型

nodeType的值为8；

nodeName的值为"#comment";

nodeValue的值是注释的内容;

parentNode可能是Document或Element;

CDATASection类型

nodeType的值为4；

nodeName的值为"#cdata-section";

nodeValue的值是CDATA区域中的内容;

parentNode可能是Document或Element;

DocumentType类型

nodeType的值为10；

nodeName的值为doctype的名称;

nodeValue的值为null;

parentNode是Document;

DocumentFragment类型

nodeType的值为11；

nodeName的值为"#document-fragment";

nodeValue的值是null;

parentNode的值是null;

DocumentFragment类型

nodeType的值为2；

nodeName的值为特性的名称;

nodeValue的值为特性的值;

parentNode的值是null;

HTML5扩展

document.activeElement

说明：这个属性始终会引用DOM中当前获得了焦点的元素，文档刚刚加载完document.activeElement的值为document.body，加载期间，document.activeElement值为null；

document.hasFocus()

说明：这个方法用于确定文档是否获得了焦点；

document.readyState

说明：这个属性代表文档的状态指示器，loading代表正在加载文档，complete代表已经加载完文档；

document.compatMode

说明：这个属性告诉开发人员浏览器采用了哪种渲染模式，CSS1Compat代表标准模式，BackCompat代表混杂模式；

document.head

说明：获取文档元素的引用，chrome和safari5实现该属性，其他不支持的浏览器可以用getElementsByTagName()方法；

document.charset

说明：表示文档中实际使用的字符集；默认情况下，这个属性的值为"UTF-16"；

document.defaultCharset

说明：表示根据默认浏览器及操作系统的设置得到的默认字符集；支持浏览器IE、Safari、Chrome；

插入标记

innerHTML

说明：在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记；在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点；

outerHTML

说明：在读模式下，outerHTML属性返回调用元素及所有子节点的HTML标签；在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素；

outerHTML相比innerHTML多了调用元素本身；

insertAdjacentHTML()

说明：插入标记的最后一个新增方法，它接收2个参数，插入位置和插入的HTML文本；第一个参数必须是以下值之一：

"beforebegin":在当前元素之之前插入一个紧邻的同辈元素；

"afterbegin":在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；

"beforeend":在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；

"afterend":在当前元素之后插入一个紧邻的同辈元素；


element.insertAdjacentHTML("beforebegin","<p>hello world</p>");
innerText

说明：在读取值时，他会按照由浅入深的顺序，将子文档树中的所有文本拼接起来；在写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点

outerText

说明：除了作用范围扩大到了包含调用它的节点之外，其他没啥区别，读操作outerText和innerText完全一样，写操作时，outerText会替换整个元素，包括子节点；

滚动

scrollIntoView()

说明：可以在所有HTML元素上调用，通过滚动浏览器窗口或某个元素容器，调用元素就可以出现在视口中，如果传入true，或者不传，那么窗口滚动后会让调用元素的顶部和视口顶部尽可能平齐，如果传入false，调用元素会尽可能全部出现在视口中；


document.forms[0].scrollIntoView();
scrollIntoViewIfNeeded(alignCenter)

说明：只有当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见，如果传入alginCenter为true，则表示尽量将元素显示在视口中部（垂直方向）；

scrollByLines(lineCount)

说明：将元素的内容滚动指定的行高，lineCount值可以是正值也可以是负值；

scrollByPages(pageCount)

说明：将元素的内容滚动到指定的页面高度，具体高度由元素的高度决定；


// 将页面主体滚动5行

document.body.scrollByLines(5);

// 在当前元素不可见时，滚动到浏览器视口

document.images[0].scrollIntoViewIfNeeded();

// 将页面主体往回滚动1页

document.body.scrollByPages(-1);

scrollIntoViewIfNeeded()、scrollByLines()、scrollByPages()这3种方法都是Safari和Chrome支持，所以最常用的还是所有浏览器都支持的scrollIntoView();

读了《JavaScript高级程序设计第3版》之后，做的读书笔记，方便后续回顾，如有错误，欢迎批评与指正

avatar
文章
阅读
粉丝