HTML DOM笔记2

节点创建、删除…

1.创建节点 1）创建元素节点

通过createElement 创建一个新的元素节点 接着把该元素节点，通过appendChild加入到另一个元素节点div1中

<div id="d">Hello HTML DOM</div> <script> function add(){ var hr=document.createElement("hr"); var div1 = document.getElementById("d"); div1.appendChild(hr); } </script>

2）创建文本节点

首先创建一个元素节点p (p是p标签，不是随便命名的变量名) 接着通过createTextNode创建一个内容节点text 把text加入到p 再把p加入到div

<div id="d">Hello HTML DOM</div> <script> function add(){ var p=document.createElement("p"); var text = document.createTextNode("这是通过DOM创建出来的<p>"); p.appendChild(text); var div1 = document.getElementById("d"); div1.appendChild(p); } </script>

3）创建属性节点

首先创建一个元素节点a 接着创建一个内容节点content 把content加入到a 然后通过createAttribute创建一个属性节点 href 设置href的值为http:12306.com 通过setAttributeNode把该属性设置到元素节点a上 最后把a加入到div

<div id="d">Hello HTML DOM<br></div> <script> function add(){ var a=document.createElement("a"); var content = document.createTextNode("http://12306.com"); a.appendChild(content); var href = document.createAttribute("href"); href.nodeValue="http://12306.com"; a.setAttributeNode(href); var div1 = document.getElementById("d"); div1.appendChild(a); } </script>

2.删除节点 1）删除元素节点

先获取该元素的父节点通过父节点，调用removeChild 删除该节点 <script> function removeDiv(){ var parentDiv = document.getElementById("parentDiv"); var div2= document.getElementById("div2"); parentDiv.removeChild(div2); } </script>

2）删除文本节点

通过childNodes[0] 获取文本节点 注:children[0] 只能获取第一个子元素节点，不能获取文本节点通过removeChild删除该文本节点 但是这种方式比较麻烦，一般都是直接通过innerHTML设置为空即可。 注: 通过innerHTML=""的方式，同样会导致文本子节点被删除。 <script> function removeDiv1(){ var parentDiv = document.getElementById("parentDiv"); var textNode = parentDiv.childNodes[0]; parentDiv.removeChild(textNode); } function removeDiv2(){ var parentDiv = document.getElementById("parentDiv"); parentDiv.innerHTML=""; } </script>

3）删除属性节点

先获取该元素节点元素节点，调用removeAttribute删除指定属性节点 function removeHref(){ var link= document.getElementById("link"); link.removeAttribute("href"); } </script>

3.替换节点

获取父节点创建子节点获取被替换子节点通过replaceChild进行替换 注: replaceChild 第一个参数是保留的节点，第二个参数是被替换的节点 <script> function replaceDiv(){ var parentDiv = document.getElementById("parentDiv"); var d2= document.createElement("div"); var text = document.createTextNode("第二个div"); d2.appendChild(text); var d1 = document.getElementById("d3"); parentDiv.replaceChild(d2,d1); } </script>

4.插入节点 1）追加节点

追加节点一定是把新的节点插在最后面

创建新节点获取父节点通过appendChild追加 function appendDiv(){ var d3= document.createElement("div"); var text = document.createTextNode("第三个div"); d3.appendChild(text); var parentDiv = document.getElementById("parentDiv"); parentDiv.appendChild(d3); } </script>

2)在前方插入节点

创建新节点获取父节点获取需要加入的子节点通过insertBefore插入 注: insertBefore的第一个参数是新元素，第二个参数是插入位置 <script> function insertDiv(){ var d25= document.createElement("div"); var text = document.createTextNode("第二点五个div"); d25.appendChild(text); var parentDiv = document.getElementById("parentDiv"); var d3 = document.getElementById("d3"); parentDiv.insertBefore(d25,d3); } </script>