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


一、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,

待补充


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>