JavaScript DOM 操作总结

最新推荐文章于 2024-05-20 15:17:08 发布

stuShan

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量590

点赞数

分类专栏： Javascript 文章标签： javascript dom

本文链接：https://blog.csdn.net/stuShan/article/details/50832746

版权

Javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

获取和操作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 的最后一个子节点. 方法的返回值是一个指向新增子节点的引用指针.

stuShan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM 操作总结

获取和操作dom属性和文本需要清楚的概念元素节点属性节点: 元素的属性, 可以直接通过属性的方式来操作.文本节点: 是元素节点的子节点, 其内容为文本.获取属性节点:1). 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值2). 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值获取元素节点的子节点(只有元
复制链接

扫一扫