HTML5权威指南——使用DOM对象

最新推荐文章于 2023-09-08 15:38:40 发布

gyypwrs

最新推荐文章于 2023-09-08 15:38:40 发布

阅读量140

点赞数

分类专栏： HTML5权威指南文章标签： html5

本文链接：https://blog.csdn.net/gyypwrs/article/details/110743688

版权

HTML5权威指南专栏收录该内容

20 篇文章 0 订阅

订阅专栏

使用元素对象

使用以下的一组属性能够读取或者修改被代表的元素的数据，属性如下：

使用类

有两种方法来处理元素的类，className和classList
className返回一个类的列表。使用举例如下：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      p {
        border: 2px solid black;
        width:200px;
        height:100px
      }
      p.newclass{
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <p class="you gala" id="text">
      像条狗,更像一个笑话,也许我很傻,但我不会怕,我知道只有不断出发,才能够紧随你纵情的步伐
    </p>
    <button id="pressme">Press Me</button>
    <script>
      document.getElementById("pressme").onclick = function(e){
        console.log("按我添加一个新类！")
        document.getElementById("text").className += " newclass"
      }
    </script>
  </body>
</html>

在这里插入图片描述

使用classList属性返回一个DOMTokenList对象，这个对象定义了一些有用的方法和属性来管理类列表
classList使用举例如下(还是上面的代码)：

使用元素属性

在这里插入图片描述

后面四种操作属性的方法使用举例

使用以data-开头的属性

网站中经常会看到以data-开头的属性定义,虽然W3C不认定,但最新HTML5规定data-是合理的,在HTML5中,任何以data-开始的都是自定义属性,通常它用来实现一些HTML里没有明确定义的元素,把用户自定义的属性应用到代码中
在DOM中可以通过dataset属性来操作这些自定义属性，返回一个包含值的数组。如下是使用方法示例
使用dataset需要注意的几点是，不根据位置进行索引而是根据名称来进行索引，因此遍历也是用for in语句。（如下）

使用所有属性

可以通过attributes属性获取一个包含某元素所有属性的集合，它会返回一个由 Attr 对象构成的数组。

使用 text 对象

元素的文本内容由text对象代表，在文档模型中表现为元素的子对象
text对象的成员如下

修改模型

DOM 操纵成员的方法有以下好多种呀
下面两个是创建新元素的方法

创建和删除元素

删除和创建的举例如下：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      table {
          border: 2px solid black;
          border-collapse: collapse;
          margin: 10px;
      }
      td {
          padding:4px 5px;
      }
    </style>
  </head>
  <body>
    <table border="1">
        <thead>
            <th>Name</th>
            <th>Color</th>
        </thead>
        <tbody id="fruitBody">
            <tr><td>Banana</td><td>Yellow</td></tr>
            <tr><td>Apple</td><td>Red/Green</td></tr>
        </tbody>
        <button id="add">Add Element</button>
        <button id="remove">Remove Element</button>
    </table>
    <script>
        var tableBody = document.getElementById("fruitBody")
        document.getElementById("add").onclick = function(){
            var row = tableBody.appendChild(document.createElement("tr"));
            row.setAttribute("id","newrow");
            row.appendChild(document.createElement("td"))
               .appendChild(document.createTextNode("Plum"));
            row.appendChild(document.createElement("td"))
                .appendChild(document.createTextNode("Purple"));
        };
        document.getElementById("remove").onclick = function() {
            var row = document.getElementById("newrow");
            row.parentNode.removeChild(row);
        }

    </script>
  </body>
</html>

在这里插入图片描述

复制元素

可以使用 cloneNode 方法来复制现有的元素，使用此方法可以不必从头开始创建想要的元素如下所示喽

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      table {
          border: 2px solid black;
          border-collapse: collapse;
          margin: 10px;
      }
      td {
          padding:4px 5px;
      }
    </style>
  </head>
  <body>
    <table border="1">
        <thead>
            <th>Multiply</th>
            <th>Result</th>
        </thead>
        <tbody id="fruitBody">
            <tr><td class="sum">1*1</td><td class="result">1</td> </tr>
        </tbody>
        <button id="add">Add Row</button>
    </table>
    <script>
        var tableBody = document.getElementById("fruitBody")
        document.getElementById("add").onclick = function(){
            var count = tableBody.getElementsByTagName("tr").length+1;
            var newElem = tableBody.getElementsByTagName("tr")[0].cloneNode(true);
            newElem.getElementsByClassName("sum")[0].firstChild.data = count+"*"+count;
            newElem.getElementsByClassName("result")[0].firstChild.data = count*count;
            tableBody.appendChild(newElem)
        };
        

    </script>
  </body>
</html>

在这里插入图片描述

移动元素

以下代码展示了将表格的一行移至另一表格下

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      table {
          border: 2px solid black;
          border-collapse: collapse;
          margin: 10px;
      }
      td {
          padding:4px 5px;
      }
    </style>
  </head>
  <body>
    <table border="1">
        <thead><th>Name</th><th>Color</th></thead>
        <tbody>
            <tr><td>Banana</td><td>Yellow</td></tr>
            <tr id="apple"><td>Apple</td><td>Red/Green</td></tr>
        </tbody>
    </table>
    <table border="1">
        <thead><th>Name</th><th>Color</th></thead>
        <tbody id="fruitBody">
            <tr><td>Plum</td><td>Purple</td></tr>
        </tbody>
    </table>
    <button id="move">Move</button>
    <script>
        document.getElementById("move").onclick = function(){
            var elem = document.getElementById("apple");
            document.getElementById("fruitBody").appendChild(elem);
        }
    </script>
  </body>
</html>

在这里插入图片描述

比较元素对象

使用 isSameNode 方法比较元素对象是否代表了同一个元素(代码是移动元素部分的代码)。
也可以使用isEqualNode方法来比较

使用HTML片段

使用innerHTML和outerHTML属性获取HTML片段
outerHTML返回包含定义这个元素及其所有子元素的HTML，innerHTML属性则返回子元素的HTML

向文本块插入元素

向由Text对象代表的文本块添加元素（偷懒）

gyypwrs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5权威指南——使用DOM对象

使用元素对象使用以下的一组属性能够读取或者修改被代表的元素的数据，属性如下：使用类有两种方法来处理元素的类，className和classListclassName返回一个类的列表。使用举例如下：<!doctype html><html> <head> <meta charset="utf-8"> <style> p { border: 2px solid black;
复制链接

扫一扫