JavaScript DOM 操作总结

来源：互联网发布：淘宝店9.9包邮编辑：程序博客网时间：2024/05/26 02:20

获取和操作dom属性和文本需要清楚的概念

元素节点
属性节点: 元素的属性, 可以直接通过属性的方式来操作.
文本节点: 是元素节点的子节点, 其内容为文本.
- 获取属性节点:
1). 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
2). 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值
- 获取元素节点的子节点(只有元素节点才有子节点!!):
  1. childNodes 属性获取全部的子节点, 但该方法不实用.
  2. 因为如果要获取指定的节点的指定子节点的集合,
  3. 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
  4. firstChild 属性获取第一个子节点
  5. lastChild 属性获取最后一个子节点
- 获取文本节点:
1). 步骤: 元素节点 –> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

代码

<!-- 演示    1 如何获取属性节点，获取和改变属性节点的属性；    2 如何获取和改变文本节点及其文本值；--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script type="text/javascript">        window.onload = function(){            var h2 = document.getElementById("hello");            //get the attr value method 1            console.log(h2.id);            //edit attr            h2.id = "hello javascript";            //get node value method 2            console.log(h2.getAttributeNode("id").nodeValue);            console.log(h2.getAttributeNode("name").nodeValue);            console.log(h2.getAttributeNode("class").nodeValue);            console.log(h2.getAttribute("class"));            console.log(h2.className);            console.log(h2.classList[0] + "--" + h2.classList[1]);            console.log(h2.nodeName);            console.log(h2.name); //null            //get the text value            console.log(h2.text); //null            console.log(h2.firstChild.textContent);            //edit the textNode            h2.firstChild.textContent = "good by the fucking dom!"        }    </script></head><body><h2 id="hello" class="header blue" name="learn_dom">hello dom, take it easy!</h2></body></html>

输出

获取和操作dom属性和文本的输出

演示创建节点，互换节点，插入节点，删除节点的操作

节点的属性

节点的属性:
nodeName: 代表当前节点的名字. 只读属性.
如果给定节点是一个元素节点或属性节点，nodeName 属性将返回这个元素的名字。
如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串
nodeType：返回一个整数, 这个数值代表着给定节点的类型.
只读属性. 1 – 元素节点, 2 – 属性节点, 3 – 文本节点
nodeValue：返回给定节点的当前值(字符串). 可读写的属性
1. 元素节点, 返回值是 null.
2. 属性节点: 返回值是这个属性的值
3. 文本节点: 返回值是这个文本节点的内容

代码

<!--演示创建节点，互换节点，插入节点，删除节点的操作--><!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <script type="text/javascript">      window.onload = function () {          var ul1 = document.getElementById("hob");          alert(ul1.childElementCount);          //append a childNode          var liNode = document.createElement("li");          var textNode = document.createTextNode("美剧");          liNode.appendChild(textNode);          ul1.appendChild(liNode);          //edit build in attr          liNode.id = "jack";          liNode.className = "liNode_class";          //create attr          liNode.setAttribute("black","nigger");          //get the attr          alert(liNode.id + '--' + liNode.className + '--' + liNode.getAttribute("black"));          alert(ul1.childElementCount);          //del a childNode          ul1.removeChild(liNode);          //replace basketball with music          alert("start replace basketball with music");          var mLi = document.getElementById("music");          var bLi = document.getElementById("basketball");          var mLiCopy = mLi.cloneNode(true);          alert(mLiCopy.id);          ul1.replaceChild(mLiCopy,bLi);          alert("replaced successfully! change the text of mLiCopy");          mLiCopy.firstChild.textContent = "fat girl";          //exchange node          alert("start to exchange");          exchangeNode(mLi,mLiCopy);          //insert runLiCopy before mLiCopy          alert("start to insert insert runLiCopy before mLiCopy")          var runLiCopy =  document.getElementById("run").cloneNode(true);          ul1.insertBefore(runLiCopy,mLiCopy);          //remove childNode          var liNodes = document.getElementsByTagName("li");          for(var i=0;i < liNodes.length; i++){              liNodes[i].onclick = function(){                  var flag = confirm("did you want to remove" + this.firstChild.textContent);                  if(flag){                      this.parentNode.removeChild(this);                  }              }          }      }      //function to exchangeNode        function exchangeNode(aNode,bNode){            var aParent = aNode.parentNode;            var bParent = bNode.parentNode;            if(aParent && bParent){                var aNodeCopy = aNode.cloneNode(true);                bParent.replaceChild(aNodeCopy,bNode);                aParent.replaceChild(bNode,aNode);            }        }    </script></head><body><ul id="hob">    <li id="music">音乐</li>    <li>编程</li>    <li id="basketball">篮球</li>    <li>排球</li>    <li id="run">跑步</li></ul></body></html>

概念详解

替换子元素

replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,oldChild); 返回值是一个指向已被替换的那个子节点的引用指针

创建一个元素节点

createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数：被创建的元素节点的名字, 是一个字符串. 方法的返回值：是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1. 新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

创建一个文本节点

createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3. 方法只有一个参数：新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里

为元素节点添加子节点

appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点. 方法的返回值是一个指向新增子节点的引用指针.

0 0