js基本功——DOM——element(2)

方法：

　　insertBefore(addWho, beforeWho)

　　　　在元素的某个子元素之前添加一个新元素

　　appendChild(element)

　　　　向元素添加新的子节点，作为其最后一个子节点

 1 <body>
 2     <div id="div1"><p> p </p></div>
 3 </body>
 4 <script>
 5     var w = function(str=""){document.write(str+"<br>")};
 6     var d = document;
 7     window.$ = window.myQuery = function(arg){
 8                 if(typeof(arg)==="string"){
 9                     if(arg.search(/^\u0035.+/)){
10                         return document.getElementById(arg.replace(/#/, ""));
11                     }
12                 }
13             }
14     var div1 = $("#div1");
15     var h2 = d.createElement('h1');
16     h2.innerHTML = " h2 ";
17     div1.appendChild(h2);
18     var h1 = h2.cloneNode();
19     h1.innerHTML = " h1 ";
20     div1.insertBefore(h1, div1.firstChild);
21 </script>
View Code

 

 

　　cloneNode(element)

　　　　克隆元素

 

　　compareDocumentPosition(element)

　　　　比较节点相对于另一个节点的文档位置

　　　　返回值为2的n次幂：

　　　　　　1　　没有关系，两个节点不属于同一个文档

　　　　　　2　　元素在对比元素之后

　　　　　　4　　元素在对比元素之前

　　　　　　8　　元素在对比元素内部

　　　　　　16　　元素在对比元素外部

　　　　　　32　　没有关系， 或两个节点是统一元素的两个属性

 

　　getAttribute(attrName)

　　　　获取元素指定属性的值

 

　　setAttribute(attrName, attrValue)

　　　　设置元素指定属性的值，或添加一个新属性并为其赋值

 

　　getAttributeNode('attrName')

　　　　获取元素指定属性名称的属性对象

 

　　setAttributeNode(attrNode)

　　　　设置或修改元素的某个属性节点

 

　　getElementById(id)

　　　　通过id属性获取元素

　　getElementsByTagName(tagName)

　　　　通过标签名获取元素集合

　　getElementsByClassName(className)

　　　　通过类名获取元素集合

 

 

　　hasAttribute(attrName)

　　　　检测元素是否有指定名称的属性

　　　　返回true 或 false

 

　　hasAttributes(attrName1, attrName2, ...)

　　　　检测元素是否有指定名称的属性们， 各属性之间用逗号分隔

　　　　返回true 或 false

　　

　　hasChildNodes(node1, node2, ...)

　　　　检测元素是否包含指定的元素们，各元素之间用逗号分隔

 1 <body>
 2     <div id="div1" onclick = "" onload = "">
 3         <p id="p1"></p>
 4         <p id="p2"></p>
 5     </div>
 6 </body>
 7 <script>
 8     var w = function(str=""){document.write(str+"<br>")};
 9     var d = document;
10     window.$ = window.myQuery = function(arg){
11                 if(typeof(arg)==="string"){
12                     if(arg.search(/^\u0035.+/)){
13                         return document.getElementById(arg.replace(/#/, ""));
14                     }
15                 }
16             }
17     var div1 = $("#div1");
18     w(div1.hasAttribute('onclick'));
19     w(div1.hasAttributes('onclick'));
20     w(div1.hasAttributes('onclick', 'onload'));
21     w(div1.hasChildNodes($('#p1'), $('#p2')));
22 </script>
View Code

 

　　isEqualNode(node)

　　　　判断是否和指定节点相同，判断条件如下：

　　　　　　节点类型相同

　　　　　　拥有相同的属性和属性值，次序可以不一致

　　　　　　所有的后代均为相同的子节点

 

　　isSameNode(node)

　　　　判断是否为同一个节点

　　

　　normalize()

　　　　清除空的文本节点，并合并相邻的文本节点

　　　　经测试，由于代码格式而产生的两个相邻元素之间的空白文本节点通过此方法无法被清除

 

　　removeAttribute(attrName)

　　　　移除指定的属性节点

 

　　removeAttributeNode(attrName)

　　　　移除多个指定的属性节点并返回被删除的节点

 

　　　　

posted @ 2019-12-08 18:06  anch  阅读(109)  评论(0)    收藏  举报