DOM节点操作

304 阅读2分钟

节点关系

parentNode父节点

childNodes子节点

previousSibling前一个节点

NextSibling后一个节点

操作节点

parentNode.appendChild(someNode)向父节点的末尾添加子节点

parentNode.insertBefore(newNode,null)插入为最后一个子节点

parentNode.insertBefore(newNode,parentNode.firstChild)插入为第一个子节点

parentNode.replaceChild(newNode,parent.firstNode)替换第一个子节点

parentNode.removeChild(parent.firstchild)移除第一个子节点

myNode.cloneNode(true)复制节点及整个子节点树

myNode.cloneNode(false)只复制节点本身

document.write()文档原样写入,括号接收一个参数,即要写入的文本/HTML/JS文件

document.writeIn()文档原样写入且在末尾添加换行符,括号接收一个参数,即要写入的文本/HTML/JS文件

创建节点

document.createElement()只接收一个参数,即要创建的元素的标签名

document.createTextNode()创建新文本节点,接收一个参数,即要插入的节点中的文本,可用加入HTML标签

innerHTMl直接赋值为HTML语句

innerText可以获取元素中包含的所有文本内容,包括子文档的文本;设置innerText属性会先移除先前存在的子节点;FF不支持此属性,用textContent代替

操作表格

<table>元素的属性和方法

caption保存对<caption>元素的指针

toBodies <tbody>元素的集合

tFoot<tfoot>元素的指针

tHead<thead>元素的指针

rows对表格中所有行的集合

createTHead() 创建<thead>元素,将其放到表格中,返回引用

createCaption() 创建<caption>元素,将其放到表格中,返回引用

deleteTHead() 删除<thead>元素

deleteTFoot()删除<tfoot>元素

deleteCaption()删除<caption>元素

deleteRow(pos)删除指定位置的行

insertRow(pos)向rows集合中的指定位置插入一行

<tbody>元素的属性和方法

rows<tbody>元素中行的集合

deleteRow(pos)删除指定位置的行

insertRow(pos)向rows集合中的指定位置插入一行,返回对新插入行的引用

####<tr>元素的属性和方法 cells<tr>元素中的单元格的集合

deleteCell(pos)删除指定位置的单元格

insertCell(pos)向cells集合中的指定位置插入一个单元格,返回...

//代码实例

//创建table
var table = document.createElement('table');
//创建tbody
var tbody = document.createElement('tbody');
table.appendChild(tbody);

//创建第一行
tbody.insertRow(0);//表示将插入的行放在第一行,方便下面引用
tbody.rows[0].insertCell(0);//创建第一个单元格并插入
tbody.rows[0].cell[0].appendChild(document.createTextNode('hello'));

...

document.body.appendChild(table);

文档信息

document.title取得标题,也可设置

document.URL 取得完整URL

document.domain取得域名,可设置

document.referrer取得来源页的URL