面试题201412——client DOM操作和CSS操作

作者：zccst

一、DOM操作文档树

其实对于DOM系列的学习，回头想想也就如下几个方面

1，节点查找和遍历
（1）查找的四个方法+选择器
getElementById, getElementByName, getElementByTagName, getElementByClassName
通过css选择器选取元素:#id  .class  div  input[name="xx"]  span.fatal.error
querySelectorAll("选择器");//不支持伪元素
querySelector("选择器");
sizzle

（2）节点关系
这是我. 有nodeName, nodeType, nodeValue

parentNode,
兄弟：proviousSibling, nextSibling
孩子：childNodes(Array), firstChild, lastChild,

（3）操作
createNode
兄弟：insertBefore, cloneNode
孩子：appendChild, removeChild, replaceChild

例如：往子元素第一个元素插入一个元素 node.parentNode.insertBefore(newNode, node);

2，节点属性 Attribute之类
添加删除
HTML5中增加 data-xx，使所有属性都变得合法

3，节点内容 innerHTML之类
HTML: innerHTML / outerHTML
Text: innerText / outerText
纯文本：textContent

4，文档和元素的几何形状和滚动


5，HTML表单


6，其他文档特性







二、DOM操作CSS
1，四种种选择器
document.getElementById("");
document.getElementByTagName("");
document.getElementByClassName("");
document.getElementBy("");

2，类选择器
sizzle选择器，主要是子孙，后代，链式选择器
querySelect()
querySelectAll();

3，计算屏幕
getComputeStyle

4，
待补充