HTML5权威指南读书笔记19（第28章）-dom元素，classname属性，classlist类列表，data开头自定义属性，attributes所有属性，text对象，添加创建克隆移动元素及节点

最新推荐文章于 2021-09-08 10:00:59 发布
最新推荐文章于 2021-09-08 10:00:59 发布
阅读量209 收藏
点赞数
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/110199259
版权
1、概述

在这里插入图片描述

2、使用元素对象

HTMLElement对象提供了一组属性，用来读取和修改被代表元素的数据

<body>
    <p id="mytext" dir="ltr" lang="ch">
        这里有一些文本，那里还有一些文本，这里都是一些文本
    </p>  
    <pre id="results"></pre>
    <script type="text/javascript">
      var results=document.getElementById("results");
      var mytext=document.getElementById("mytext");
      results.innerHTML+="tag:"+mytext.tagName+"\n";
      results.innerHTML+="id:"+mytext.id+"\n";
      results.innerHTML+="dir:"+mytext.dir+"\n";
      results.innerHTML+="lang:"+mytext.lang+"\n";
      results.innerHTML+="hidden:"+mytext.hidden+"\n";
      results.innerHTML+="disabled:"+mytext.disabled+"\n";
    </script>
</body>
3、className使用className属性
<head>
    <style type="text/css">
        .myp{background-color: blueviolet;}
        .mynewP{background-color: chartreuse;}
    </style>
</head>
<body>
    <p class="myp" id="mytext" dir="ltr" lang="ch">
        这里有一些文本，那里还有一些文本，这里都是一些文本
    </p>  
    <br/>
    <button id="mybut">切换</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mybut=document.getElementById("mybut");
      var mytext=document.getElementById("mytext");
      mybut.onclick=function(){
        mytext.className="mynewP";
      }
    </script>
</body
4、classList管理类列表

在这里插入图片描述
除了以上这些属性和方法，还可以使用数组风格的表示法，通过索引来获得类
如果移除一个类，则可以是用classlist
toggle有就天剑，没有就移除

<head>
    <style type="text/css">
        .myp{background-color: blueviolet;}
        .mynewP{background-color: chartreuse;}
    </style>
</head>
<body>
    <p class="myp" id="mytext" dir="ltr" lang="ch">
        这里有一些文本，那里还有一些文本，这里都是一些文本
    </p>  
    <br/>
    <button id="mybut">Toggle</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mybut=document.getElementById("mybut");
      var results=document.getElementById("results");

      mybut.onclick=mytoggleClass;
      listClasses();
      function listClasses(){
        var classlist=document.getElementById("mytext").classList;
          results.innerHTML="Current classes:";
          for(var i=0; i<classlist.length;i++){
            results.innerHTML+=classlist[i]+"";
          }
      }
     
      function mytoggleClass(){
        document.getElementById("mytext").classList.toggle("mynewP");
        listClasses();
      }
    </script>
</body>
5、使用元素属性

在这里插入图片描述
hasAttribute，setAttribute，getAttribute（）

<body>
    <p class="myp" id="mytext" dir="ltr" lang="ch">
        这里有一些文本，那里还有一些文本，这里都是一些文本
    </p>  
    <br/>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mytext=document.getElementById("mytext");
      var results=document.getElementById("results");

      results.innerHTML="p has a lang attribute:"+mytext.hasAttribute("lang")+"\n";
      results.innerHTML+="add lang atrribute:";
      mytext.setAttribute("lang","en-us")+"\n";
      results.innerHTML+="attribute is:"+mytext.getAttribute("lang")+"\n";
    </script>
</body>
6、data开头的自定义属性

以data-customProperty的形式自定义属性，最后统一在dataset集合中读取这些自定义属性

<body>
    <p class="myp" id="mytext" data-fruit="myfr" data-oran="myora">
        这里有一些文本，那里还有一些文本，这里都是一些文本
    </p>  
    <br/>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mytext=document.getElementById("mytext");
      var results=document.getElementById("results");

      for(var attr in mytext.dataset){
        results.innerHTML+=attr+"\n";
      }
      results.innerHTML+=mytext.dataset["fruit"];
    </script>
</body>
6、attributes使用所有属性

通过attributes属性获得一个包含某元素所有属性的集合，他会返回一个由attr对象构成的数组
在这里插入图片描述

<body>
    <p class="myp" id="mytext" data-fruit="myfr" data-oran="myora">
        这里有一些文本，那里还有一些文本，这里都是一些文本
    </p>  
    <br/>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mytext=document.getElementById("mytext");
      var results=document.getElementById("results");

      var attri=mytext.attributes;

      for(var i=0;i<attri.length;i++){
        results.innerHTML+="Name:"+attri[i].name+",value:"+attri[i].value+"\n";
      }
      attri["data-fruit"].value="anoterFruit";
      results.innerHTML+=attri["data-fruit"].value;
    </script>
</body>
7、使用text对象

文本内容是text对象，如

这是text对象

，即标签对之内的内容时text对象，但p不是text对象
在这里插入图片描述 
<body>
    <p class="myp" id="mytext" data-fruit="myfr" data-oran="myora">
        这里有一些文本，那里还有一<b>这里都是一些文本</b>些文本单独发东方闪电
    </p>  
    
    <br/>
    <button id="mybut">press</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mytext=document.getElementById("mytext");
      var results=document.getElementById("results");
      var mybut=document.getElementById("mybut");

      mybut.onclick=function(){
        var btext=mytext.firstChild;
        results.innerHTML="length:"+btext.length+"\n";
        btext.replaceWith("this is a new string");

      }
    </script>
</body>
7、修改模型

在这里插入图片描述

8、appendChild，createElement，createTextNode，removeChild创建和删除元素

通过document对象创建新的元素，然后找到一个现存的htmlElement，并使用之前介绍的某种方法来插入他们

<body>
    <table border=1 id="mytab">
      <thead><th>Name</th><th>Color</th></thead>
      <tbody>
        <tr><td>张三</td><td>红色</td></tr>
        <tr><td>李四</td><td>绿色</td></tr>

      </tbody>
    </table>
    <br/>
    <button id="mybut">add</button>
    <button id="remove">remove</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mytab=document.getElementById("mytab");
      var mybut=document.getElementById("mybut");
      var remove=document.getElementById("remove");

      mybut.onclick=function(){
        var row=mytab.appendChild(document.createElement("tr"));
        row.setAttribute("id","newrow");
        row.appendChild(document.createElement("td"))
        .appendChild(document.createTextNode("王二"));
        row.appendChild(document.createElement("td"))
        .appendChild(document.createTextNode("粉色"));

      }

      remove.onclick=function(){
        var row=document.getElementById("newrow");
        //mytab.removeChild(row)
        row.parentNode.removeChild(row);

      }
    </script>
</body>
9、cloneNode元素

cloneNode(true)指定是否复制其子元素

<body>
    <table border=1 id="mytab">
      <thead><th>Name</th><th>Color</th></thead>
      <tbody>
        <tr><td>张三</td><td>红色</td></tr>
        <tr><td>李四</td><td>绿色</td></tr>
      </tbody>
    </table>
    <br/>
    <button id="mybut">duplicate</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mytab=document.getElementById("mytab");
      var mybut=document.getElementById("mybut");

      mybut.onclick=function(){
        var newrow=mytab.childNodes[3].cloneNode(true);
        console.log(newrow);
        mytab.appendChild(newrow);

      }

     
    </script>
</body>
10、移动元素（原有元素不见了）
<body>
    <table border=1 id="mytab">
      <thead><th>Name</th><th>Color</th></thead>
      <tbody>
        <tr><td>张三</td><td>红色</td></tr>
        <tr id="lisi"><td>李四</td><td>绿色</td></tr>
      </tbody>
    </table>
    <br/>
    <table border=1>
      <thead><th>Name</th><th>Color</th></thead>
      <tbody id="anothertab">
        <tr><td>王二</td><td>红色</td></tr>
      </tbody>
    </table>
    <br/>
    <button id="mybut">move</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var mytab=document.getElementById("mytab");
      var mybut=document.getElementById("mybut");

      mybut.onclick=function(){
        var row=document.getElementById("lisi");
        document.getElementById("anothertab").appendChild(row);
      }

     
    </script>
</body>
11、isSameNode，isEqualNode比较元素对象

isSameNode：简单地检查他们是否代表了同一个元素。
isEqualNode：如果元素具有相同的类型，相同的属性值，其子元素也相同并且顺序一致，那么他们就是相同的。

<body>
    <table border=1 id="mytab">
      <thead><th>Name</th><th>Color</th></thead>
      <tbody id="mytbody">
        <tr id="zhangsan"><td>张三</td><td>红色</td></tr>
        <tr id="lisi"><td>李四</td><td>绿色</td></tr>
      </tbody>
    </table>
    <br/>
    
    <br/>
    <button id="mybut">issame</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var results=document.getElementById("results");
      var mybut=document.getElementById("mybut");
      var mytbody=document.getElementById("mytbody");

      var myzhangsan=document.getElementById("zhangsan");
      var myrow=mytbody.getElementsByTagName("tr")[0];
      if(myzhangsan.isSameNode(myrow)){
        results.innerHTML="the two element is same";
      } 
    </script>
</body>

isEqualNode

  <table border=1 id="mytab">
      <thead><th>Name</th><th>Color</th></thead>
      <tbody id="mytbody">
        <tr class="zhangsan"><td>张三风</td><td>红色</td></tr>
        <tr id="lisi"><td>李四</td><td>绿色</td></tr>
      </tbody>
    </table>
    <br/>
    <button id="mybut">issame</button>
    <pre id="results"></pre>
    <script type="text/javascript">
      var elems=document.getElementsByClassName("zhangsan");
      if(elems[0].isEqualNode(elems[1])){
        results.innerHTML="the two element is equal";
      } else{
        results.innerHTML="the two element is NOT equal";

      }
    </script>
</body>
12、innerHtml，outerHTML，insertAdjacentHTML使用html片段

innerhtml：标签内部的内容
outerhtml：连带标签及内容一起显示出来

<body>
    <table border=1 id="mytab">
      <thead><th>Name</th><th>Color</th></thead>
      <tbody id="mytbody">
        <tr class="zhangsan"><td>张三</td><td>红色</td></tr>
        <tr id="lisi"><td>李四</td><td>绿色</td></tr>
        <tr class="zhangsan"><td>张三</td><td>红色</td></tr>

      </tbody>
    </table>
    <br/>
    
    <br/>
    <button id="inner">innerHTML</button>
    <button id="outer">outerHTML</button>
    <textarea rows="3" id="results"></textarea>
    <script type="text/javascript">
      var results=document.getElementById("results");
      var row=document.getElementById("lisi");

      var inner=document.getElementById("inner");
      var outer=document.getElementById("outer");
      
      inner.onclick=function(){
        results.innerHTML=row.innerHTML;
      }
      outer.onclick=function(){
        results.innerHTML=row.outerHTML;
      }
    </script>
</body>
13、insertAdjacentHTML插入HTML片段（代码片段）

insertAdjacentHTML方法有两个参数，一个参数是插入的位置，一个参数是插入的代码片段
在这里插入图片描述

<body>
    <table border=1 id="mytab">
      <thead><th>Name</th><th>Color</th></thead>
      <tbody id="mytbody">
        <tr id="targetrow"><td>Placeholder</td></tr>
      </tbody>
    </table>
    <br/>
    
    <br/>
    <button id="ab">After Begin</button>
    <button id="ae">After End</button>
    <button id="bb">Before Bengin</button>
    <button id="be">Before End</button>

    <script type="text/javascript">
      var target=document.getElementById("targetrow");
      var buttons=document.getElementsByTagName("button");
      
      for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=handleButPress;
      }
      
      function handleButPress (e){
        if(e.target.id=="ab"){
          target.insertAdjacentHTML("afterbegin","<td>this is after begein<td/>");
        }else if(e.target.id=="ae"){
          target.insertAdjacentHTML("beforeend","<td>this is before end<td/>");
        }else if(e.target.id=="bb"){
          target.insertAdjacentHTML("beforebegin","<tr><td colspan='2'>this is before end<td/></tr>");
        }else{
          target.insertAdjacentHTML("afterend","<tr><td colspan='2'>this is After End<td/></tr>");
        }
      
      }

      
    </script>
</body>
13、向文本块插入元素
<body>
    <p id="text">
      there is some things to do something, By the time add,countleess zhen
    </p>
    <br/>
    
    <br/>
    <button id="insert">Insert Element</button>
    

    <script type="text/javascript">
      var buttons=document.getElementById("insert");
      buttons.onclick=function(){
        var text=document.getElementById("text");
        text.firstChild.splitText(10);

        var newText=text.childNodes[1].splitText(9).previousSibling;
        //创建了一个b元素，将截取的一部分放入到文本中
        text.insertBefore(document.createElement("b"),newText).appendChild(newText);
      }  
    </script>
</body>
心湖中的石子
关注
专栏目录
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
11-09 1913
DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...
JS笔记（二） DOM部分
Kivitor的博客
03-23 482
DOM DOM定义了表示和修改文档所需的方法。dom对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合（但不能操作CSS样式表，但是可以通过操作html改变行间样式来间接改变）。也有人称DOM是对HTML以及XML的标准编程接口 DOM基本操作 对节点的增删改查 查 查看元素节点 把对象放在一个类数组里 不能使用push方法 document代表整个文档 document.getElementById()//元素id在ie8以下的浏览器，不区分id大小写，而且也返回匹配cl
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
09-28
可能大家在使用jquery mobile时，经常会看到data-role、data-theme等的使用，这些都是HTML5自定义属性,本文整理一些，需要的朋友可以参考下
html 语言中class,HTML5 classList操作类名属性简介
weixin_29759387的博客
06-03 379
通常我们在操作类名时，需要通过className属性来添加，删除和替换类名。因为className中是一个字符串，所以即使我们只是修改字符串的一部分，也要每一次都重新设置整个字符串的值。例如有下面的代码：这个元素中共有三个类名。如果要删除第一个类名name1，需要把这三个类名拆开，删除不需要的类名，然后在将余下的类名组合后重新放回去。代码如下：//第一步要获取类名字符串，并将它拆分为一个数组var...
DOM 的classList 属性
weixin_30904593的博客
03-18 157
1.添加1个或多个classadd(class1, class2, ...)2.移除classremove(class1, class2, ...)3.判断指定的类名是否存在contains(class)true - 元素包已经包含了该类名false - 元素中不存在该类名4.在元素中切换类名。toggle(class, true|false)第一个参数为要在元素...
html5 list 优化,HTML5的classList API优化对样式名className的操作
weixin_34761438的博客
06-04 111
HTML5的classList API提供了以下几个比较有用的控制CSS样式名的方法：//添加一个classelem.classList.add(classname);//删除一个classelem.classList.remove(classname);//判断一个class是否已存在elem.classList.contains(classname);//如果class已存在则移除，如果不存在...
JavaScript HTML DOM节点类型之Element类型（Element对象）
tasty
01-11 6540
在HTML DOM中，所有部分都可以认为是节点，Element对象表示 HTML 元素。Element是Document的一个子对象，Element对象接口描述了所有元素所普遍具有的方法和属性， HTML DOM中所有的元素都继承自Element对象。 1. Element对象 HTML DOM中，Element对象表示 HTML 元素。Element对象可以拥
js学习笔记：DOM——节点层次
(づ｡◕‿‿◕｡)づgigi奋斗在前端和刷题中╮(╯﹏╰)╭
10-16 8087
DOM（文档对象模型）是针对HTML和XML文档的一个API，描绘了一个层次化的节点树。 DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。 节点分为几种不同的类型。文档节点是每个文档的根节点。html元素为文档元素。 文档元素是文档的最外层元素 文档中的其他所有元素都包含在文档元素中。 每个文档都只能有一个文档元素。 在html页面中，文档元素始终都是html元素。在这里用脑
JS笔记(前端小灰狼)
tby_pr的博客
09-08 3479
目录 JavaScript基础语法 序言 JavaScript发展历史（JS） JavaScript能干什么 JavaScript的组成 JavaScript代码的书写位置 行内式 JS 代码（不推荐） 内嵌式 JS 代码 外链式 JS 代码（推荐） JS 中的注释 单行注释 多行注释 变量（重点） 定义变量及赋值 变量的命名规则和命名规范 数据类型（重点） 基本数据类型 复杂数据类型（暂时先不讲） 判断数据类型 判断一个变量是不是数字 数据类型转换 其他数据
狂神说Java SpringMVC笔记
xiaoding520的博客
04-06 3956
回顾MVC ​ 回顾MVC 什么是MVC？ MVC是模型(Model)、视图(View)、控制器(Controller)的简写，是一种软件设计规范 是将业务逻辑、数据、显示分离的方法来组织代码 MVC主要作用是降低了视图与业务逻辑间的双向耦合 MVC不是一种设计模式，MVC是一种架构模式。当然不同的MVC存在差异 Model（模型）：数据模型，提供要展示的数据，因此包含数据和行为，可以认为是领域模型 或JavaBean组件（包含数据和行为）不过现在一般都是分离开来：Value Object（数据Da
html5 data 属性,详解HTML5 data-* 自定义属性
weixin_36064575的博客
06-04 458
在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。读写方式data-*有两种设置...
html--innerHTML用法及和与innerText区别
热门推荐
Schaffer的博客
06-04 1万+
一、innerHTML用法 innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：<div id="aa">这是内容</div> 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。 实例： 1.获取段落p的 in
一张图看懂js中元素、属性和文本节点的关系
庄AC的博客
09-07 5967
文本节点和元素节点为父子关系，但是属性节点和元素节点是兄弟关系吗？如果是兄弟关系， 那么通过“元素对象.属性名”的方式访问属性怎么解释？究竟元素节点和属性节点什么关系呢？ 元素节点和文本节点之间存在父子关系，元素节点和属性节点之间不存在父子关系
JavaScript：DOM对象 控制HTML元素 节点属性
21号先锋者
02-02 215
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;ChapterNine&lt;/title&gt; &
HTML5笔记总结（一）
javaScript1997的博客
11-23 1022
一、什么是HTML5(html+js+css)? HTML的第五个版本，有新的元素、属性、行为； 二、HTML的优势？ （1）跨平台：唯一一个通吃PC、IPhone、Android等主流平台的跨平台语言； （2）特效：（canvas、svg） （3）注重用户体验：（Echarts、highchart） （4）提供了很多API接口 ...
list.insert()
Swxctx
04-25 4456
insert()方法插入对象sw到列表的偏移量索引。 语法 以下是insert()方法的语法： list.insert(index, sw) 参数 index -- 要插入对象sw必要的索引 sw -- #!/usr/bin/python #coding=utf-8 list1 = [123, 'xyz', 'swxc', 'abc'] list1.insert( 3
深入解析DOM元素对象的属性与方法
本文档深入解析了JavaScript (JS) 基础中DOM（Document Object Model，文档对象模型）元素对象的属性和方法。在DOM中，HTML文档被分解为一系列节点，这些节点构成了层次结构，包括文档节点、元素节点、属性节点、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值