节点
nodeType 节点类型 1---标签 2---属性 3---文本
nodeName 节点名 大写标签名---标签 小写属性名--属性 #text--文本
nodeValue 节点值 null---标签 属性值--属性 文本内容--文本
获取元素、节点
parentNode 父节点 parentElement 父元素 （一般来说这两个返回的都是同一个节点）
childNodes 子节点 children 子元素 （返回的都是伪数组）
第一个子节点 firstChild 第一个子元素 firstElementChild
最后一个子节点 lastChild 最后一个子元素 lastElementChild
前一个节点 previousSibling 前一个元素 previousElementSibling
后一个节点 nextSibling 后一个元素 nextElementSibling
注意：IE8及IE8以下，关于子节点的或者前后节点的，获取得到的是元素，而关于元素的都不支持（例如firstChild获取得到的是第一个子元素）
兼容性在后面文章；
ele.appendChild（node） 在该元素/节点末尾添加一个节点
ele.insertBefore（newnode，node） 在某个元素（node）前添加节点（newnode），如果node为null则在最后添加
ele.removeChild（node） 移除节点
ele.replaceChild（newnode，node） 替换节点
ele.cloneNode（boolean） 复制节点，boolean为true则深复制（整个节点树），而为false则浅复制（只 复制节点本身）
document.documentElement 获取<html>元素
document.body 获取<body>元素
document.title document.URL==>http://www.baidu.com/mytest/ document.domain==>www.baidu.com
document.getElementById(id);
根据id获取元素（注意：如果表单元素中的name属性与一个div的id一致时，如果通过getElementById想要获取这个div元素，但是返回的却是该表单元素）
document.getElementByTagName("标签名"); 根据标签名获取元素集合，返回的是伪数组（* 表示全部）
document.getElementsByName("属性名"); 根据name属性获取元素集合
document.getElementsByClassName("类名") 根据类名获取元素集合
document.write(...) 写入文档，如果是文档加载结束后再调用，会覆盖整个文档
ele.getAttribute("属性名") 获取该元素的属性值（不存在返回null）
ele.setAttribute("属性名"，“值”) 设置该元素的属性值
ele.removeAttribute("属性名") 删除该元素中的这个属性
创建元素：var ele= document.createElement("元素名")； document.body.appendChild(ele)；// 添加到某个元素中
创建文本节点：var textNode = document.createTextNode(str)； ele.appendChild(textNode)；
分割文本节点：var newNode = ele.splitText(5)；// 从索引为5，切开文本，分成两个文本节点
DOM扩展
querySelector(css选择符)； 返回匹配到的第一个元素，匹配不到返回null
querySelectorAll(css选择符)； 与querySelector一样，只是获取的是全部而不是第一个
matchesSelector(css选择符)； 调用该方法的元素与选择符一致则返回true
Firefox--mozMatchesSelector(); Safari和Chrome--webkitMatchesSelector(); IE9+--msMatchesSelector();
（IE9+）
childElementCount 返回子元素个数（不包括文本，注释）
firstElementChild 返回第一个子元素（firstChild元素版）
lastElementChild 返回最后一个子元素
previousElementSibling 返回前一个兄弟元素
nextElementSibling 返回后一个兄弟元素
H5相关
getElementsByClassName() 返回该类名的所有元素集合（NodeList）
classList.add() 添加类 classList.remove 删除类 classList.toggle 切换类 classList.contains 是否包含该类
classList只有Firefox3.6+和Chrome支持
document.activeElement 获取当前焦点元素，默认document.body，文档加载时是null
document.hasFocus() 判断文档（任何元素）是否获取焦点
document.readyState==> loading：文档正在加载 ； complete：文档加载完成
documnet.head 获取<head>元素 （只有Chrome和Safari5支持）
document.charset 获取/修改UTF-8
设置自定义数据属性要加前缀data 获取用dataset（只有Firefox6+和Chrome支持）
例如：<div data-user = "aa" data-pwd = "123" ></div>
获取属性：var div = document.getElementByTagName("div")[0];
var user = div.dataset.user;
div.data.pwd="000";
innerHTML 设置/获取文本或HTML标签（<script>标签只有IE8及以下在特殊情况下执行）
outerHTML 获取的是元素自身及其所以子节点的HTML标签，设置的话 例如：div.outerHTML = "<p>haha</p>";
就是将整个div换成这个p标签（也就是这个div没了，换成了p）
ele.insertAdjacentHTML("beforebegin","<p>haha</p>"); // 作为前一个兄弟插入
ele.insertAdjacentHTML("afterbegin","<p>haha</p>"); // 作为第一个子元素插入
ele.insertAdjacentHTML("beforeend,"<p>haha</p>"); // 作为最后一个子元素插入
ele.insertAdjacentHTML("afterbegin","<p>haha</p>"); // 作为后一个兄弟插入
element.scrollIntoView(boolean)； 参数为true，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；
参数为false时，使element的底部与视图（容器）底部对齐。
这里可以参考https://blog.youkuaiyun.com/hyl94/article/details/77472154
ele.contains(node) 判断该元素是否有这个（node）后代 Firefox9+，其他浏览器都支持
innertext 读取该元素下的所有文本；写入文本（先清除所有子节点，然后添加文本）；Firefox不支持innerText，但是支持textContent。
DOM2级和DOM3级
判断浏览器是否支持DOM2级的css能力
var DOM2CSS = document.implementation.hasFeature("CSS","2.0");
var DOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");
设置样式：元素.style.样式名 因为float是保留字，所以 IE用styleFloat 其他浏览器用cssFloat
div.style.backgroundColor = "red"; div.style.width = "18px"; 当然也可以获取样式
获取计算后的样式：window.getComputedStyle(ele, null)[attr] IE用ele.currentStyle[attr]（兼容性在另外一章）
// 剩下的以后再补
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
