1:DOM:Document Object Model(文档对象模型)
DOM操作分类是什么?
DOM Core,HTML-DOM,CSS-DOM
节点和节点的关系:
文档:document——根节点:<html>——(
<head>(<title>,<mate>)
<body>(<img>,<h1>,<p>)
)
父子标签:一个包含一个(ul,li);
兄弟标签:同级(li,li)
2:如何访问节点?
使用getElement系列方法访问指定节点 getElementById() getElementsByName() getElementsByTagName() 根据层次关系访问节点
3:如何操作节点的属性?
节点属性:parentNode,childNodes,fristChild,lastChild,nextSibling,previousSibling,
fristElementChild返回节点的第一个子节点
lastElementChild返回字节的最后一个子节点
nextElementSibling下一个节点
previousElementsibling上一个节点
4:节点信息:
nodeName:节点名称
nodeValue:节点值
nodeType:节点类型(元素element 1,属性attr 2,文本text 3,注释comments 8,文档document 9)
5:操作节点:
操作节点的属性(
getAttribute("属性名") setAttribute("属性名","属性值")
)
创建和插入节点(createElement( tagName) 创建一个标签名为tagName的新元素节点
A.appendChild( B) 把B节点追加至A节点的末尾
insertBefore( A,B ) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
)
删除和替换节点(
removeChild( node) 删除指定的节点
replaceChild( newNode, oldNode) 用其他的节点替换指定的节点
)
6:操作节点样式
改变样式的属性 :
style属性:
语法:HTML元素.style.样式属性="值";
onclick:当用户单击某个对象时调用事件
onmouseover:鼠标移到某元素上
onmouseout:鼠标从某元素上移开
onmousedown:鼠标按钮被按下
className属性:
语法:
HTML元素.className="样式名称“;
7:获取元素的样式
HTML元素.style.样式属性;
document.defaultView.getComputedStyle(元素,null).属性;
HTML元素. currentStyle.样式属性;
8:元素属性应用
语法:
document.documentElement.scrollTop; document.documentElement.scrollLeft;
或者
document.body.scrollTop; document.body.scrollLeft;
9:操作节点
操作节点的属性 创建和插入节点 删除和替换节点 操作节点样式 获取元素的样式