JS中的DOM
Posted tractors
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中的DOM相关的知识，希望对你有一定的参考价值。
一、入口函数；
(1) $(document).ready()：简写为$(function()) DOM结构绘制完成执行，而无需等到图片或其他媒体下载完毕；jq
(2) $(window).load：在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用；jq
(3) window.onload=function()：必须等到页面内包括图片的所有元素加载完毕后才能执行；js
二、dom选择器：
(1) .getElementById();
(2) .getElementsByTagName()[]; 标签名
(3) .getElementsByName()[]; 只有部分标签name生效
(4) .getElementsByClassName()[]; 类名
(5) .querySelector(); CSS选择器(1个),非实时。
(6) .querySelectorAll(); CSS选择器(1组)，非实时。
三、节点的类型：
(1) 元素节点----1
(2) 属性节点----2
(3) 文本节点----3
(4) 注释节点----8
(5) document----9
(6) DocumentFragment----11
四、节点的四个属性：
(1) .nodeName; //元素的标签名，以大写表示，只读
(2) .nodeValue; //Text或Comment节点的文本内容，可读可写
(3) .nodeType; //该节点的类型，只读
(4) .attributes; //Element节点的属性集合
五、节点方法：
Node.hasChildNodes(); //检查元素节点是否含有子节点
注：此子节点包含文本节点等
六、Element节点的属性：
(1) .innerhtml 例：div.innerHTML += "<h1>ABC</h1>"
(2) .innerText (火狐不兼容)/textContent (ie6不兼容)
七、Element节点的方法：
(1) ele.setAttribute("属性名","属性值");
(2) ele.getAttribute("属性名");
注：dom.className；可直接读写class；
(3) classList属性:用于操作类属性；
classList.add("类名1","类名2",….);
classList.contains("类名"); 判断是否包含；
classList.remove("类名1","类名2",….);
classList.toggle(""); 切换
八、遍历节点树：
(1) .parentNode; 父节点（最顶端为document）
(2) .childNodes; 子节点们
(3) .firstChild; 第一个子节点
(4) .lastChild; 最后一个子节点
(5) .nextSibling; 后面一个兄弟节点
(6) .previousSibling; 前面一个兄弟节点
九、基于元素节点的遍历节点树：
(1) .parentElement; 父元素节点
(2) .childeren; 元素子节点们
(3) node.childElementCount===node.children.length
(4) .firstElementChild;
(5) .lastElementChild;
(6) .nextElementSibling;
(7) .previousElementSibling;
十、DOM扩展：
(1) .getElementById; //定义在Document.prototype上，
即Element节点上不能使用;
(2) .getElementsByName; //定义在HTML.Document.prototype上,
即非HTML中的document不能用（XML DOC; Ele);
(3) .getElementsByTagName; //定义Document.prototype和
Element.prototype;
(4) <body>; document.body;
<head>; document.head;
<HTML>; document.documentElement;
(5) .getElementsByClassName\\.querySelectorAll\\.querySelector在
Document.proyotype和Element.prototype中均有定义；
以上是关于JS中的DOM的主要内容，如果未能解决你的问题，请参考以下文章