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中均有定义；
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！