Document Object Model

1. DOM => Document Object Model(文档对象模型);

　　DOM是一个树形结构;由Node\Element(节点\元素)构成;

2.Node\Element;

　　element.id\element.className\element.value\....

　　element.tagName\element.nodeName => 元素的标签名;

　　element.nodeType; => 元素的类型;

　　Element(1); => 元素;

　　Attbribute(2); => 属性;

　　Text(3) => 文本节点;

　　Comment => 注释;

　　Document(9) => 文档

　　DocumentFragment(11) => 类似代码片段;

　　element.nodeValue => 文本节点的文本信息;

3.Attributes

　　element.attributes; => 返回一个NamedNodeMap对象;包含节点的所有属性;

　　element.hasAttribute(key); => 判断节点有没有key属性;

　　element.getAttribute(key); => 获取节点的key属性;

　　element.setAttribute(key,value); => 设置节点的属性;

　　element.removeAttribute(key); => 删除节点的key 属性;

4.classList;

　　element.classList; => 返回一个装着className的数组;

　　element.classList.contains(); => 判断一个class是否存在;

　　element.classList.add(); => 增加class;参数可以设置多个,但参数为array时候执行toSting()操作,结果塞进去;

　　element.classList.remove(); =>删除class,别的和楼上一致;

　　element.classList.toggle(); => 切换class;如果有则删除,没有则add;

5.dataset;

　　element.dataset => 给节点一个存储空间来存储信息的自定义属性;

　　　　　　　　　　　　设置属性:element.dataset.key = value;

　　　　　　　　　　　　删除属性:delete elemet.dataset.key;网上说:element.dataset.key = null;可以删除属性,亲测chorme不会删除会把值转换为null;标签上还是可以看到这个属性;

6.get.. & query..

　　document.getElementById();

　　document.getElmentsByTagName();

　　document.getElmentsByName();

　　document.getElmentsByClassName();

　　document.querySelector(); => 类似jquery的$,但是如果是一个集合的话只会返回第一个;

　　document.querySelectorAll(); => 无论多少个元素都返回一个集合;

7.DOM节点关系;

　　element.parentNode\element.parentElement; => 父

　　element.nextSibling\element.nextElementSibling; => 下一个兄弟

　　element.previousSibling/element.previousElementSibling => 上一个兄弟

　　element.firstChild\element.firstElementChild; => 第一个儿子

　　element.lastChild\element.lastElementChild; =>最后一个儿子

　　element.childNodes\element.children; => 所有的儿子;

　　element.hasChildNodes(cld); => 有没有key这个儿子;

　　element.childElementCount; => 返回子元素,不包括文本节点和注释的个数;

　　element.matches(selector)\element.matchesSelector(selector); =>接受一个cssSelector,判断调用元素是否匹配;

　　element.isEqualNode(node); => 检查两个节点是否相等。

　　element.contains(node)\element.compareDocumentPosition(node); => 祖先节点接收一个节点查找有没有此节点;





8.创建DOM节点

　　document.createElement(tag) => 创建标签;

　　document.createTextNode(text) => 创建文本节点;

　　document.createDocumentFragment() => 创建代码片段;

　　element.cloneNode(isdeep) => 克隆节点;

9.操作DOM节点

　　element.appendChild(node); => 将节点插入element的后面;

　　element.parentNode.insertBefore(node,element); =>

　　element.parentNode.replaceChild(node,element); => 通过父级替换兄弟节点

　　element.parentNode.removeChild(element); =>通过父级删除子级;

　　element.remove(); =>直接删除;

　　element.innerHTML;

　　element.innerText\element.textContent

　　element.outerHTML;

　　element.outerText;

　　element.insertAdjacentElement(position,node);

　　element.insertAdjacentElement(position,node);

　　element.insertAdiacentText(position,node);

　　position:beforebegin\afterbegin\beforeend\afterend; => 开始标签前\开始标签后\结束标签前\结束标签后;

10.TextNode;

　　node.length;

　　textNode.nodeValue;

　　textNode.data;

　　textNode.appendData(text);

　　textNode.deleteData(text);

　　textNode.insertData(offset, count);

　　textNode.replaceData(offset, count, text);

　　textNode.splitText(offset);

　　textNode.substringData(offset, count);

　　node.normalize();

11.Document

　　document.documentElement;

　　iframe.contentDocument||iframe.contentWindow.document;

　　document.charset;

　　document.title;

　　document.head;

　　document.body == document.getElementsByTagName('body')[0];

　　document.links \ document.images\ document.forms;

　　document.readyState - complete;

　　document.activeElement;

12.Style

　　element.style.key = value;

　　element.style.property;

　　element.style.cssText = 'key:value;key2:value2';

　　style = document.defaultView.getComputedStyle(element,pseduo_class);

　　style = element.currentStyle;