javascript DOM-元素节点操作

1、DOM documrnt object model 文档对象模型

【注】“W3C” 文档对象模型（DOM）是中立于平台和元语言的接口，
　　它允许查询和脚本动态地访问和更新文档的内容、结构和样式。

html css 页面内容
js 页面行为操作
【注】DOM是打通html、css和js壁垒的一个工具

DOM 节点种类一共有三种
【注】在js中所有节点都是对象
<div title = "属性节点"> 测试Div</div>

元素节点 <div></div>
属性节点 title = "属性节点"
文本节点测试Div

获取元素标签的三个方法:
(1)document.getElementById(id);
【功能】通过当前元素节点的id,获取对应元素节点

元素节点属性
通过这个节点对象，访问它的一系列属性
tagName 获取元素节点的标签名
innterHTML 获取元素节点标签间的内容解析标签

HTML属性
id
title
style
className 在获取class，不能直接class，必须是用className
访问这些属性：
元素节点.属性名
元素节点[属性名]

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4          <meta charset="utf-8">
 5         <title>docoment</title>
 6          <script type="text/ecmascript">
 7              window.onload = function(){ //页面加载完成后要执行的函数
 8                      var oDiv = document.getElementById("div1");
 9         　　　　　　　　//alert(oDiv.tagName);
10         　　　　　　　//　alert(oDiv .innerHTML);
11          　　　　　　　//oDiv.innerHTML = "<h1>我</h1>"
12 
13          　　　　　　　　//alert(oDiv.id);
14          　　　　　　　　//alert(oDiv.title);
15          　　　　　　　　//alert(oDiv.className);
16 
17          　　　　　　　　//可以对属性赋值
18          　　　　　　　　//oDiv.title = "world";
19         　　　　　　　　 //oDiv.className = "obx";
20 
21 
22          　　　　　　　　//alert(oDiv.style);//[object CSSStyleDeclaration样式对象
23         　　　　　　　　//alert(oDiv.style.width);
24          　　　　　　　　//oDiv.style.width = 400px;
25 
26          //【注】在style样式中，background-color使用-连接的属性,访问的时候要将-去掉，
27          //    然后让后面的单词的首字母大写。
28          //可以对属性赋值
29          　　　　　　　　//alert(oDiv.style.backgroundColor);
30         　　　　　　　　//oDiv.style.backgroundColor = "blue";
31 
32                  }
33 
34        </script>
35 
36      </head>
37  <body>
38     <div id="div1" title="hello" class="box"
39       style="width: 300px;height: 300px;background-color: red;">
40      <em>协议</em>
41      </div>
42 </body>
43  </html>

View Code

(2)document.getElementsByTagName()
参数：标签名
功能：获取当前页面上所有符合该标签名标准的元素节点。
返回值：一个装有所有符合条件的元素节点的数组。

node.getElementsByTagName()
【注】从node节点开始找出所有符条件的元素节点。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6     <script type="text/ecmascript">
 7         window.onload = function(){ //页面加载完成后要执行的函数
 8 
 9 　　　　　　//var aLis= document.getElementsByTagName("li");
10 　　　　　　//alert(aLis);//[object NodeList] 是一个数组
11　　　　　　 //alert(aLis.length);//8
12 
13 　　　　　　//获取url下的所用的li标签
14             var oUl = document.getElementById("ul1");
15             var aLis = oUl.getElementsByTagName("li");
16 　　　　　　//alert(aLis.length);//4
17 
18             for(var i = 0; i < aLis.length; i++){
19 　　　　　　//alert(aLis[i].innerHTML);获取元素下标的两种方法
20 　　　　　　//alert(aLis.item(i));
21             }
22 
23         }
24 
25     </script>
26 
27 </head>
28 <body>
29 <ul id="ul1">
30     <li>11111</li>
31     <li>22222</li>
32     <li>33333</li>
33     <li>44444</li>
34 </ul>
35 <ol>
36     <li>55555</li>
37     <li>66666</li>
38     <li>77777</li>
39     <li>88888</li>
40 
41 </ol>
42 
43 </body>
44 </html>

(3)document.getElementsByName
参数：name
返回值：装有符合条件的元素节点的数组
【注】不支持从某一个节点去查，只能从document去查。
name属性一般情况下只有文本输入框的元素节点才有。一般使用在表单里。

 1 <head>
 2     <meta charset="utf-8">
 3     <title>docoment</title>
 4     <script type="text/ecmascript">
 5         window.onload = function(){ //页面加载完成后要执行的函数
 6             var nodes = document.getElementsByName("hello");
 7             alert(nodes);//[object NodeList]
 8 //alert(nodes.length);//4
 9 
10         }
11 
12     </script>
13 
14 </head>
15 <body>
16 　　<div name = "hello"></div>
17 　　<span name = "hello"></span>
18 　　<input name = "hello" />
19 　　<div id="div1">
20    <span name = "hello"></span>
21 </div>
22 
23 </body>
24 </html>

（4）node. getELementsByClassName( )
功能:获取node节点下，所有符合条件的元素节点。
参数: class
返回值:所有符合条件的元素节点组成的数组。
【注】getELementsByClassName在低版本的IE-8以下浏览器不支持。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>docoment</title>
    <script type="text/ecmascript">
        window.onload = function(){ //页面加载完成后要执行的函数
　　　　　　//var nodes =document.getElementsByClassName("box");
　　　　　　//alert(nodes);//[object HTMLCollection]
　　　　　　//alert(nodes.length);//4

　　　　　　//获取url下的class为box的元素节点
            var oUl = document.getElementById("ul1");
            var nodes = oUl.getElementsByClassName("box");

            for(var i=0; i<nodes.length;i++){
                alert(nodes[i].innerHTML);//22222 44444
            }
        }
    </script>

</head>
<body>
<ul id="ul1">
    <li>11111</li>
    <li class="box">22222</li>
    <li>33333</li>
    <li class="box">44444</li>
</ul>
<ol id="ol1">
    <li class="box">55555</li>
    <li>66666</li>
    <li class="box">77777</li>
    <li>88888</li>
</ol>
</body>
</html>

修改后，函数兼容性封装的方法

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6     <script type="text/ecmascript">
 7         window.onload  = function(){
 8             var oUl = document.getElementById("ul1");
 9             var nodes = elementByClassName(oUl,"box");
10 
11             for(var i=0; i<nodes.length;i++){
12                 alert(nodes[i].innerHTML);  //22222   44444
13             }
14         }
15 
16         //封装函数，使浏览器兼容
17         //* 通配符  任意类型的元素节点
18         function elementByClassName(parent,classStr){
19             //<1>找到parent下所有的元素节点
20             var nodes= parent.getElementsByTagName("*");
21             var result = [];//记录符合条件的元素节点
22             for(var i = 0;i<nodes.length;i++){
23                 //<2>如果符合条件，添加到数组中
24                 if(nodes[i].className==classStr){
25                     result.push(nodes[i]);
26                 }
27             }
28             return result;
29         }
30     </script>
31 
32 </head>
33 <body>
34 <ul id="ul1">
35     <li>11111</li>
36     <li class="box">22222</li>
37     <li>33333</li>
38     <li class="box">44444</li>
39 </ul>
40 <ol id="ol1">
41     <li class="box">55555</li>
42     <li>66666</li>
43     <li class="box">77777</li>
44     <li>88888</li>
45 
46 </ol>
47 
48 </body>
49 </html>

（000）document.querySelector()

　　返回值：一个元素节点，找到符合条件的第一个元素节点

（111）document.querySelectorAll（）

　　返回值：是一个伪数组

　　两者参数：字符串，css选择器格式的字符串　　（例：#box .ldiv1）

(5)获取当前有效样式

getComputedStyle(元素节点) [获取样式类型];火狐/谷歌/safari支持

而通过.style.xxx的方式只能访问内联的css样式

 1 <!DOCTYPE html>
 2         <html>
 3             <head>
 4                 <meta charset="utf-8">
 5                 <title>docoment</title>
 6                 <style type="text/css">
 7                     div{
 8                         background-color: red;
 9                         width: 300px;
10                     }
11                     #div1{
12                         width: 400px;
13                     }
14                 </style>
15                 
16                 <script type="text/ecmascript">
17                 window.onload = function(){ //页面加载完成后要执行的函数
18                     var oDiv = document.getElementById("div1");
19                     alert(getComputedStyle(oDiv)["width"]);//400px
20             }    
21             </script>
22                 
23             </head>
24             <body>
25                 <div id="div1" style="height: 300px;"></div>
26             </body>
27         </html>

IE 的兼容
[注]浏览器兼容
元素节点.currentStyle 【获取样式类型】；

 1 <!DOCTYPE html>
 2         <html>
 3             <head>
 4                 <meta charset="utf-8">
 5                 <title>docoment</title>
 6                 <style type="text/css">
 7                     div{
 8                         background-color: red;
 9                         width: 300px;
10                     }
11                     #div1{
12                         width: 400px;
13                     }
14                 </style>
15                 
16                 <script type="text/ecmascript">
17                 window.onload = function(){
18                     var oDiv = document.getElementById("div1");
19                     alert(getStyle(oDiv,"width"));//400px
20                 }
21                  function getStyle(elem,attr){ //页面加载完成后要执行的函数
22                     return elem.currentStyle ? emel.currentStyle[attr]: 
23                         getComputedStyle(elem)[attr];
24                 
25                 }
26             </script>
27                 
28             </head>
29             <body>
30                 <div id="div1" style="height: 300px;"></div>
31             </body>
32         </html>

iddocument. getE lementById()

tagName node.getELementsByTagName()

name document.getELementsByName( )

className document.getElementsByClassName ()

通过封装函数简化,上述的操作。
封装-个函数，可以拥有上述几种获取元素节点的功能。
[注] css选择器
#id 通过id获取元素节点
class 通过className获取元素节点
tagName 通过tagName获取元素节点
name=xxx 通过name获取元素节点

 1 <!DOCTYPE html>
 2 <html>
 3 　　<head>
 4     　　<meta charset="utf-8">
 5     　　<title>docoment</title>
 6     　　</head>
 7 　　<script type="text/javascript">
 8 
 9     function $(vArg){
10         //<1>对参数进行区分
11         switch(vArg[0]){
12             case "#"://id
13                 return document.getElementById(vArg.substring(1));
14                 break;
15 
16             case "."://className
17                 return elementByClassName(document,vArg.substring(1));
18                 break;
19 
20             default:
21             //对参数的前五个字符，进行判断
22                 var str = vArg.substring(0,5);
23                 if(str == "name"){//name
24                     return docoment.getElementsByName(vArg.substring(5));
25                 }else{//tagName
26                     return document.getElementsByTagName(vArg);
27                 }
28                 break;
29         }
30     }
31 
32     window.onload=function(){
33         //id
34         //alert($("#div1").innerHTML);//11111
35         
36         //classNmae
37         //alert($(".box").length);//2
38         //alert($(".box")[1].innerHTML);//44444
39         
40         //tagName
41         //alert($("div").length);//4
42         
43         //name
44         //alert($("name=hello").length);//1
45         //alert($("name=hello")[0].innerHTML);//4
46     }
47 
48     </script>
49 <body>
50     <div id="div1">11111</div>
51     <div class="box">22222</div>
52     <div class="box">44444</div>
53     <div name="hello">55555</div>
54 </body>
55 </html>

View Code

Attribute

set/getAttribute
removeAttribute
【注】都是操作当前元素节点中某个属性

　　支持自定义属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6     <script type="text/ecmascript">
 7         window.onload = function(){
 8             var oDiv = document.getElementById("div1");
 9             //alert(oDiv.title);//hello
10             //alert(oDiv.className);//box
11             
12             //（1）也可以赋值修改操作
13             //oDiv.title = "xxx";
14             //oDiv.className = "box3";
15             
16             //（2）修改操作
17             //oDiv.setActive("title","xxx");
18             
19             //上述两种方式的区别
20             //<1>class属性范围区别，点操作是通过className,
21             //而set/getAttribute是通过class 
22             //<2>set/getAttribute是用户自定义属性支持
23             //<3>removeAttribute
24             //alert (oDiv. getAttribute("class"));
25             //oDiv. setAttribute("class", "yyy");
26             
27             //设置用户自定义属性
28             //oDiv.xxx = "yyy";//不行
29             //oDiv.setAttribute("xxx","yyy");
30             
31             //alert(oDiv.sss);//undefined
32             //alert(oDiv.getAttribute("sss"));//ttt
33             
34             //oDiv.removeAttribute("title");//删除了title="hello"
35             //oDiv.title = " ";//点操作不能删除整个属性，只能设置为空，但属性仍存在。
36 
37         }
38 
39     </script>
40 
41 </head>
42 <body>
43 <div id="div1" title="hello" name = "world"
44      class="box" sss="ttt">
45 </div>
46 </body>
47 </html>

View Code

innerHTML　　获取标签间的内容　　会解析标签　　不包括解析子标签

innerText　　　获取标签间的纯文本　　包括字标签的所有文本

outerHTML 　　从外标签开始到外标签结束

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script>
 8         window.onload = function(){
 9             var oDiv = document.getElementById('div1');
10             
11             // alert(oDiv.innerHTML);//<em>en文本</em><strong>strong文本</strong>
12             // alert(oDiv.innerText);//en文本strong文本
13 
14             //赋值操作
15             // oDiv.innerHTML = "<h1>hello world</h1>";
16             // alert(oDiv.innerText);//hello world
17 
18            // oDiv.innerText = "<h1>hello world</h1>";
19 
20            //alert(oDiv.outerHTML);//<div id="div1" title="hello" class="box"><em>en文本</em><strong>strong文本</strong></div>
21 
22            //oDiv.outerHTML = "<h1>hello world</h1>";
23 
24         }
25     </script>
26 </head>
27 <body>
28     <div id="div1" >
29         <em>en文本</em><strong>strong文本</strong>
30     </div>
31 </body>
32 </html>

childNodes 获取当前元素节点的所有子节点

包括两种节点类型:元素节点和文本节点。
DOM节点类型
元素节点
文本节点
属性节点
【注】
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三
个非常有用的属性，分别为:nodeName、nodeType和nodeValue

nodeType nodeName nodeValue

元素节点 1 标签名 null

属性节点 2 属性名属性值

文本节点 3 #text 文本内容

【注】以下属性包含文本节点

childeNode 访问当前节点下的所有子节点

firstChild 访问子节点中的首位

lastChild 访问子节点中的最后一位

nextSibling 访问当前节点兄弟节点中的下一个节点

previousSibling 访问当前节点兄弟节点中的上一个节点

【注】以下方法值获取子节点的元素节点，有效解决回车换行 Tab键空格等带来的的节点困扰，但IE-8以下不兼容

children

firstElementChild

lastElementChild

nextElementSibling

previousElementSibling

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6     <script type="text/ecmascript">
 7         window.onload = function(){
 8             var oDiv = document.getElementById("div1");
 9             //alert(oDiv.childNodes);//[object NodeList]装有当前元素节点的所有子节点的列表
10             //alert(oDiv.childNodes.length);//3
11             
12             //alert(oDiv.childNodes[0].nodeName);//EM
13             //alert(oDiv.childNodes[0].nodeType);//1
14             //alert(oDiv.childNodes[0].nodeValue);//null
15             
16             //alert(oDiv.childNodes[1].nodeName);//#text
17             //alert(oDiv.childNodes[1].nodeType);//3
18             //alert(oDiv.childNodes[1].nodeValue);//文本内容
19             
20             
21             //alert(oDiv.firstChild.nodeName);//EM
22             //alert(oDiv.lastChild.nodeName);//STRONG
23         }
24     </script>
25 
26 </head>
27 <body>
28     <div id="div1" ><em>斜体</em>文本内容<strong>粗体</strong></div>
29 </body>
30 </html>

View Code

删除空白节点
【注】节点包括回车换行 Tab键空格
【问题】如何将空白节点取出，识别出空白节点
/^\s+$/.text() 使用左侧的正则去进行验证,如果是空白节点，
返回true，否则返回false。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6     <script type="text/ecmascript">
 7         window.onload = function(){
 8             var oDiv = document.getElementById("div1");
 9 
10             //alert(/^\S+$/.test("1 "));
11 
12             removSpaceNode2(oDiv);
13             alert(oDiv.childNodes.length);//
14             alert(oDiv.firstChild.nodeName); //    
15 
16         }
17 
18         function removSpaceNode2(parent){
19             var nodes = parent.childNodes;
20             for(var i = nodes.length-1; i>= 0; i--){//【注】删除数组时，必须倒删
21                 if(nodes[i].nedeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){
22                     parent.removeChild(nodes[i]);//删除空白节点
23                 }
24             }
25         }
26 
27         //封装函数删除空白节点
28         //firstChild    lastChild    必须从父节点上删除空白节点
29 
30         function removSpaceNode(nodes){
31             var result = [];//用来存放不是空白节点的节点的
32             for(var i= 0; i<nodes.length; i++){
33                 if(nodes[i].nedeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){   //判断是否是空白节点
34                     continue;
35                 }
36                 result.push(nodes[i]);
37             }
38             return result;
39         }
40 
41     </script>
42 
43 </head>
44 <body>
45 <div id="div1" >
46     <em>斜体</em>
47     文本内容
48     <strong>粗体</strong>
49 </div>
50 </body>
51 </html

View Code

ownerDocument属性
【注】owne rDocument
属性返回该节点的文档对象根节点，返回的对象相当于document。

window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv.ownerDocument == document); //true
alert(oDiv.parentNode.nodeName);//BODY
}

parentNode、previousSibling、nextSibling 属性
parentNode 属性返回该节点的父节点
previousSibling 属性返回该节点的前一个同级节点
nextSibling 属性返回该节点的后一个同级节点。

（代码略）

属性节点
attribute属性返回该节点的属性节点[集合]。
集合特点: 1、不重复2、无序
属性
attributes.length返回属性节点个数

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6     <script type="text/ecmascript">
 7         window.onload = function(){
 8             var oDiv = document.getElementById("div1");
 9 
10             //alert(oDiv.attributes);//[object NamedNodeMap]
11             //alert(oDiv.attributes.length);//4
12     
13             //访问其中一个属性节点
14             //alert(oDiv.attributes.getNamedItem("id"));//[object Attr]
15             //alert(oDiv.attributes["id"]);//[object Attr]
16     
17             //属性节点
18             //    nodeName    nodeType    nodeValue
19             //    属性名    类型2 值
20             //alert(oDiv.attributes["id"].nodeName);//id 
21             //alert(oDiv.attributes["id"].nodeType);//2
22             //alert(oDiv.attributes["id"].nodeValue);//div
23 
24     </script>
25 
26 </head>
27 <body>
28 <div id="div1" title="hello" name="world" class="box"></div>
29 </body>
30 </html>>

View Code

创建带文本的元素节点
creatElement()
【格式】 document.createElement(标签名)

appendChild()
【格式】 parent. appendChild( newNode )
功能:将newNode插入到parent子节点的末尾。

craeteTextNode()
【格式】document.createTextNode(文本)
功能:创建文本节点

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6 </head>
 7 <script type="text/ecmascript">
 8     window.onload=function(){
 9         var oBtn = document.getElementById("btn");
10         var oDiv =document.getElementById("div1");'
11         oBtn.onclick = function(){
12             var node = document.createElement("span");//1、创建节点
13             var oText = document.createTextNode("文本内容");//2、给span节点添加文本
14             node.appendChild(oText);//3、将文本插入到节点中
15             oDiv.appendChild(node);//4、
16         }
17 
18     }
19 
20 </script>
21 <body>
22 
23 <div id="div1" ></div>
24 <button id="btn">按钮</button>
25 
26 </body>
27 </html>

View Code

【注】如何创建一个带有文本类型的元素节点。
封装一个函数。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6 </head>
 7 <script type="text/ecmascript">
 8     window.onload=function(){
 9         var oBtn = document.getElementById("btn");
10         var oDiv = document.getElementById("div1");
11         oBtn.onclick = function(){
12 
13             var node = createElementWithTxt("span","文本内容");
14             oDiv.appendChild(node);
15         }
16     }
17 
18 
19     function createElementWithTxt(tagName,txt){
20         var node = document.createElement(tagName);
21         var oTxt = document.createTextNode(txt);
22         node.appendChild(oTxt);
23         return node;
24     }
25 
26 </script>
27 <body>
28     <div id="div1"></div>
29     <p>p</p>
30     <em>斜体</em>
31     <button id="btn">按钮</button>
32 </body>
33 </html>

View Code

insertBefore()
【格式】父节点.insertBefore(插入的节点，旧节点);
功能：将插入的节点插入到旧节点之前

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6 </head>
 7 <script type="text/ecmascript">
 8     window.onload=function(){
 9         //创建一个<strong>将这个结点插入到span节点之前。
10         var node = createElementWithTxt("strong","strong文本");    //创建strong 
11         var oSpan = document.getElementsByTagName("span")[0];
12         //进行插入
13         oSpan.parentNode.insertBefore(node,oSpan);
14     }
15 
16     function createElementWithTxt(tagName,txt){
17         var node = document.createElement(tagName);
18         var oTxt = document.createTextNode(txt);
19         node.appendChild(oTxt);
20         return node;
21     }
22 
23 </script>
24 <body>
25 <div id="div1">
26     <p>p</p>
27     <span>span</span>
28     <em>em</em>
29 </div>
30 
31 </body>
32 </html>

View Code

DOM里没有insertAfter()这个方法？封装函数来实现

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>docoment</title>
 6 </head>
 7 <script type="text/ecmascript">
 8     window.onload=function(){
 9 
10         //创建一个<strong>将这个结点插入到span节点之前。
11         var node = createElementWithTxt("strong","strong文本");    //创建strong 
12         var oSpan = document.getElementsByTagName("span")[0];
13         //进行插入
14         insertAfter(node,oSpan);
15         
16     }
17     
18     //插入节点之前
19     function createElementWithTxt(tagName,txt){
20         var node = document.createElement(tagName);
21         var oTxt = document.createTextNode(txt);
22         node.appendChild(oTxt);
23         return node;
24     }
25     
26     //插入节点之后
27     function insertAfter(newNode, oldNode){
28         //判断oldNode是否是最后一个节点
29         var parent = oldNode.parentNode;
30         if(oldNode == parent.lastChild){
31         //最后一个节点，直接插入到子节点的末尾
32             parent.appendChild(newNode) ;
33         }else{
34          //插入到oldNode的下一个节点之前
35             parent.insertBefore(newNode, oldNode.nextSibling);
36         }
37     }
38 
39 
40 
41 
42 </script>
43 <body>
44 <div id="div1">
45     <p>p</p>
46     <span>span</span>
47     <em>em</em>
48 </div>
49 
50 </body>
51 </html>

View Code

节点操作方法

replaceChild()
【格式】parent.replaceChild(newNode,oldNode);
功能：用newNode将oldNode给替换
<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>docoment</title>
</head>
<script type="text/ecmascript">
　　window.onload=function(){

　　　　var oDiv = document.getElementById("div1");
　　　　var node = document.createElement("strong");
　　　　oDiv.parentNode.replaceChild(node,oDiv);
　　}

</script>
<body>
　　<div id="div1"></div>
　　<span>span</span>
</body>
</html>

cloneChild()
【格式】克隆节点
返回值：新克隆出来的节点
参数：true 默认false
如果传true，就会复制元素节点中的所有子节点
<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>docoment</title>
</head>
<script type="text/ecmascript">
　　window.onload=function(){

　　　　var oDiv = document.getElementById("div1");
　　　　var oSpan = document.getElementsByTagName("span")[0];
　　　　//将div添加到sapn节点之前
　　　　var node = oDiv.cloneNode(true);
　　　　oSpan.parentNode.insertBefore(node,oDiv);
}

</script>
<body>
　　<span>span</span>
　　<div id="div1">div</div>
　　<p>P</p>
</body>
</html>

removeChild()
【格式】node.parentNode.removChild(node);
功能：删除节点，包括所有子节点

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8">
　　<title>docoment</title>
</head>
<script type="text/ecmascript">
　　window.onload=function(){

　　　　var oDiv = document.getElementById("div1");
　　　　oDiv.parentNode.removeChild(oDiv);

　　}

</script>
<body>
　　<span>span</span>
　　<div id="div1">div</div>
　　<p>P</p>
</body>
</html>

posted @ 2020-06-30 17:03 梦晶秋崖阅读(138) 评论(0) 编辑收藏举报

刷新页面返回顶部

梦晶秋崖

道阻且长，行则将至。

javascript DOM-元素节点操作

1、DOM documrnt object model 文档对象模型

公告