1.操作DOM
2.节点和节点的关系
3.访问节点
3.1使用getElement系列方法访问指定节点
getElementById()、getElementsByName()、getElementsByTagName()
3.2根据层次关系访问节点
节点属性
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| childNodes | 返回子节点集合，childNodes[i] |
| firstChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastChild | 返回节点的最后一个子节点 |
| nextSibling | 下一个节点 |
| previousSibling | 上一个节点 |
element属性
| 属性名称 | 描述 |
|---|---|
| firstElementChild | 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点 |
| lastElementChild | 返回节点的最后一个子节点 |
| nextElementSibling | 下一个节点 |
| previousElementSibling | 上一个节点 |
4.节点信息
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
| 节点类型 | NodeType值 |
|---|---|
| 元素element | 1 |
| 属性attr | 2 |
| 文本text | 3 |
| 注释comments | 8 |
| 文档document | 9 |
5.操作节点
5.1操作节点的属性
getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)
5.2创建和插入节点
| 名称 | 描述 |
|---|---|
| createElement( tagName) | 创建一个标签名为tagName的新元素节点 |
| A.appendChild( B) | 把B节点追加至A节点的末尾 |
| insertBefore( A,B ) | 把A节点插入到B节点之前 |
| cloneNode(deep) | 复制某个指定的节点 |
5.3删除和替换节点
| 名称 | 描述 |
|---|---|
| removeChild( node) | 删除指定的节点 |
| replaceChild( newNode, oldNode)属性attr | 用其他的节点替换指定的节点 |
var delNode=document.getElementById("first");//获取 id 为 "first" 的元素。
delNode.parentNode.removeChild(delNode);//从其父节点中移除该元素。
var oldNode=document.getElementById("second");//获取 ID 为 "second" 的 HTML 元素
var newNode=document.createElement("img");//创建一个新的 HTML 元素，并将其赋值
newNode.setAttribute("src","images/f03.jpg");//元素 newNode设置其图片源为 "images/f03.jpg"
oldNode.parentNode.replaceChild(newNode,oldNode);//oldNode,用 newNode 替换掉它。
5.4操作节点样式
改变样式的属性
style属性
HTML元素.style.样式属性＝"值"
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="25px ";
| 名称 | 描述 |
|---|---|
| onclick | 当用户单击某个对象时调用事件 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
className属性
HTML元素.className=“样式名称”
function over(){
document.getElementById("cart").className="cartOver";
document.getElementById("cartList").className="cartListOver";
}
function out(){
document.getElementById("cart").className="cartOut";
document.getElementById("cartList").className="cartListOut";
}
5.5获取元素的样式
HTML元素.style.样式属性;
alert(document.getElementById("cartList").display);
document.defaultView.getComputedStyle(元素,null).属性;
var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);
HTML元素. currentStyle.样式属性;
alert(document.getElementById("cartList").currentStyle.display);//兼容IE浏览器
6.获取元素位置
html中元素属性
