dom中一些节点获取和增改
1获取标签里的文本对象:
对象.innerText | 获取标签里的文本内容 | 早期的火狐浏览器中是不支持的 赋值会输出转义后的内容 |
对象.innerHTML | 获取标签里的所有内容 赋值会输出原样 | 都兼容 |
对象.textContent | 获取标签里的文本内容 | IE8之前包括ie8不支持 |
2 自定义属性 自定义属性 js无法通过点的方式获得
对象.getAttribute("属性名") | 得到自定义属性对象 |
对象.setAttribute("属性名",”属性值“) | 设置自定义属性对象 |
对象.removeAttribute("属性名") | 去除属性 |
3节点的种类
nodeType节点名称 | nodeName节点的名字 | nodeValue节点值 | |
标签 | 1 | 标签名 | null |
属性 | 2 | 属性名 | 属性值 |
文本 | 3 | #text | 文本内容没有就为空 |
4获得节点的方式
获得属性节点 | 对象.getAttributeNode("属性名") | 获得属性节点 | |
获得父节点元素 | 对象.parentNode | 获得父节点元素 | |
获得儿子节点 | 对象.children | 获得子节点元素(无兼容问题只获得标签元素) | |
对象.childNodes | 获得子节点(包括文本节点和标签节点) | e8之前的版本会忽略文本元素 | |
对象.firstChild | 第一个子节点 | ||
对象.firstElementChild | 第一个子元素节点 | IE8之前不兼容 | |
对象.lastChild | 最后一个子节点 | ||
对象.lastElementChild | 最一个子元素节点 | IE8之前不兼容 | |
获得兄弟姐妹节点 | nextSibling | 下一个紧邻节点 | 下一个紧邻节点,chrome 火狐都支持的,只不过呢,有可能 会获得文本节点,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容,也会获得到 |
nextElementSibling | 下一个紧邻的元素节点, |
谷歌和火狐都可以获得下一个紧邻的元素节点, |
|
previousSibling | 上一个紧邻节点 | 上一个紧邻节点,chrome 火狐都支持的,只不过呢,有可能 会获得文本节点,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容,也会获得到 | |
previousElementSibling | 上一个紧邻的元素节点 |
谷歌和火狐都可以获得上一个紧邻的元素节点, |
|
克隆节点 | 节点.cloneNode(true) | 复制节点中的全部包括文本 标签元素 | |
节点.cloneNode(false) | 自复制节点标签 | ||
删除节点 | 父元素.removechild(要删除的子元素) |
增加节点 |
父节点.appendChild (新生成的子节点) |
在父元素最后增加 | |
父节点.insertBefore (新生成的子节点,某个子节点) 在某个子节点前增加 新生成的子节点 |
在某个子元素前增加 |
5动态创建节点