BOM和DOM区别
- BOM 是浏览器对象模型,描述了与浏览器进行交互的方法和接口,根本对象是
window
- DOM 是文档对象模型,描述了处理网页内容的方法和接口,根本对象是
document
DOM 的基本思想是把结构化文档(HTML,XML
)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree
)
创建节点
let p = document.createElement('p');
let node = document.createTextNode("node");
p.appendChild(node);
方法和属性
名称 | 描述 |
---|---|
getAttribute() |
查询元素的属性 |
setAttribute() |
设置元素的属性 |
parentNode() |
返回当前节点的父节点 |
childNodes() |
返回当前节点的所有子节点的数组 |
createElement() |
创建节点 |
createTextNode() |
创建文本节点 |
appendChild() |
插入节点 |
removeChild() |
删除节点 |
cloneNode |
克隆节点 |
insertBefore(newNode,oldNode |
将新节点插入到旧节点前,从旧节点的父节点中 |
replaceChild(newNode,oldNode) |
用新节点取代旧节点,从旧节点的父节点中 |
属性 | 描述 |
---|---|
innerHTML |
获取元素内容 |
nodeName |
获取节点的名称 |
NodeValue |
获取节点的值 |
NodeType |
获取节点的类型 |
除了innerHTML
属性,也可以使用childNodes
和nodeValue
属性来获取元素的内容
表格的方法
方法 | 说明 |
---|---|
tab.insertRow(索引位置) |
在表格指定索引位置添加一行空行 |
tab.deleteRow(索引位置) |
在表格指定索引位置删除一行 |
row.insertCell(索引位置) |
在行的指定索引位置添加一个空单元格 |
row.deleteCell(索引位置) |
在行的指定位置删除一个单元格 |