DOM
来源:互联网 发布:火炬之光 mac人物存档 编辑:程序博客网 时间:2024/06/17 13:29
原生插入结点生成子元素并赋予id,修改css,删除一些节点等等类似简单问题
一、DOM结构
两个节点之间可能存在哪些关系?以及如何在节点之间任意移动?
DOM中两个节点存在的关系无非3种:父子 同辈 包含
下面详细来讲解
属性
1 父级属性
获取父节点:
node.parentNode node.parentElement
两者的区别在于后者只能获取元素
获取子节点:
childNodes,children firstChild,lastChild,firstElementChild,lastElementChild
2 同辈属性
nextSibling,previousSibling ,nextElementSibling,previousElementSibling
备注:Element Travel API 给DOM添加的属性
childElementCount,firstElementChild,lastElementChild, nextElementSibling, previousElementSibling ,他们与之前的方法之间的区别是多了Element,保证只返回元素节点,而之前的方法普通的文本节点及注释节点也会返回,之前的方法在非IE浏览器中还会把元素间的空白符当文本节点返回。
方法
1 包含方法
<div id="myDiv"> <ul id="myUl"> <li id="myLi"></li> <li></li> </ul></div>
hasChildNodes()
myDiv.hasChildNodes() //true
contains()
myDiv.contains(myLi) //true
2 关系方法
compareDocumentPosition()
000000 0 两个节点相同
000001 1 两个节点不在同一个文档(即有一个节点不在当前文档)
000010 2 参数节点在当前节点的前面
000100 4 参数节点在当前节点的后面
001000 8 参数节点包含当前节点
010000 16 当前节点包含参数节点
100000 32 浏览器的私有用途
<div id="myDiv"> <ul id="myUl"> <li id="myLi1"></li> <li id="myLi2"></li> </ul></div><script>//20=16+4,因为myUl节点被myDiv节点包含,也位于myDiv节点的后面console.log(myDiv.compareDocumentPosition(myUl));//10=8+2,因为myDiv节点包含myUl节点,也位于myUl节点的前面console.log(myUl.compareDocumentPosition(myDiv));//0,两个节点相同console.log(myDiv.compareDocumentPosition(myDiv));//4,myLi2在myLi1节点的后面console.log(myLi1.compareDocumentPosition(myLi2));//2,myLi1在myLi2节点的前面console.log(myLi2.compareDocumentPosition(myLi1));</script>
isSameNode() isEqualNode()
这两个方法都接受一个节点参数,并在传入节点与引用节点相同或相等时返回true
所谓相同(same),指的是两个节点引用的是同一个对象
所谓相等(equal),指的是两个节点是相同的类型,具有相等的属性(nodeName、nodeValue等等),而且它们的attributes和childNodes属性也相等(相同位置包含相同的值)
[注意]firefox不支持isSameNode()方法,而IE8-浏览器两个方法都不支持
<script>var div1 = document.createElement('div');div1.setAttribute("title","test");var div2 = document.createElement('div');div2.setAttribute("title","test");console.log(div1.isSameNode(div1));//trueconsole.log(div1.isEqualNode(div2));//trueconsole.log(div1.isSameNode(div2));//false</script>
深入理解DOM节点
一、DOM操作
怎样添加、移除、移动、复制、创建和查找节点?
(1)创建新节点
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild() removeChild() replaceChild() insertBefore()
(3)查找
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id,唯一性
备注:getElementsByName() 在IE中会得到一个数组,其中包括id等于name值的)
- DOM
- DOM
- dom
- dom
- DOM
- dom
- DOM
- DOM
- DOM
- DOM
- DOM
- dom
- dom
- Dom
- dom
- DOM
- DOM
- DOM
- [系分] 包图
- 1028. 人口普查(20)
- R语言数据结构
- Java设计模式——代理模式(Proxy Pattern)
- 学习淘淘商城第八十二课(SSO工程搭建)
- DOM
- ProgressBar使用步骤
- LeetCode 541. Reverse String II (字符串翻转)
- ISCC2017 pwn 200 —— 字符串格式化漏洞
- 算法练习笔记(十二)—— 超级洗衣机
- 给出几种排序总结
- 栅栏布局
- iOS脚本打包和持续集成
- 目标跟踪之ECO:Efficient Convolution Operators for Tracking