1.什么是BOM
BOM:Document Object Model(文档对象模型)
2.BOM分为:
1.BOM Core 2.HTML-BOM 3.CSS-BOM
3.节点和节点关系(结构排序之后像家族谱一样判断关系)
文档:dpcument
根节点:<html>
(父节点)<html> (父节点)<body>
(子节点)<title> (子节点) <img> <h1> <p>
4.使用getElement方法访问指定节点 、 根据层次关系访问节点
1.getElementById()
2.getElementsByName()
3.getElementsByTagName()
5.节点的属性有:(使用getElement方法调用)
1.parentNode
2.chileNodes
3.firstChlid (第一个子节点)
4.lastChild (最后一个子节点)
5.nextSibling (下一个)
6.previousSibling (上一个)
6.根据层次关系访问节点
1.firstElementChild
2.lastElementChild
3.nextElementSibling
4.previousElementSibling
示例:
document.getElementById("").firstElementChild.innerHTML || document.getElementById("").fristChild.innerHTML;
7.节点信息
1.nodeName 节点名称
2.nodeValue 节点值
3.nodeType 节点类型
8.操作节点
1.操作节点的属性
示例:
getAttribute("属性名");
setAttribute("属性名","属性值");
2.创建和插入节点
createElement(aa) 创建一个标签名为aa的新元素节点
A.appendChild(B) 把B节点追加至A节点的末尾
insertBefore(A,B) 把A节点插入到B节点之前
cloneNode(deep) 复制某个指定的节点
3.删除和替换节点
removeChild(node) 删除指定的节点
replaceChild(newNode,oldNode) 用其他节点替换指定的节点
示例:
var aa = document.getElementByld("first");
delNode.parentNode.removeChild(delNode);
4.操作节点样式
5.获取元素的样式