DOM的查找与修改

本文主要是介绍DOM的查找与修改，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

查找:

1. 按选择器查找: 今后如果元素藏的很深，非常分散时，查找条件变得很复杂，都可用按选择器查找.

(1). 只查找一个符合要求的元素

a. var 一个元素对象=任意父元素.querySelector("选择器")

按选择器

查询

(2). 查找多个符合要求的元素

b. var 类数组对象=任意父元素.querySelectorAll("选择器")

修改: 3种东西

1. 内容: 3种:

(1). 获取或修改元素开始标签到结束标签之间的原始的HTML内容

a. 元素对象.innerHTML

内部 HTML内容

b. 获取元素内容时: innerHTML原样返回HTML代码中的html内容个，不做任何加工

c. 修改元素内容时: innerHTML会先将字符串内容交给浏览器解析，然后将解析后的可以给人看的内容显示在页面上

(2). 获取或修改元素开始标签到结束标签之间的纯文本内容

a. 元素对象.textContent

文本内容

b. 获取元素内容时: textContent去掉内嵌的标签，并将特殊符号转为正文，然后在返回修改后的内容。

c. 修改元素内容: 不会将字符串内容交给浏览器解析，而是直接保持字符串的原样内容输出

d. 示例: 分别使用innerHTML和textContent获取和修改元素的内容

0_html_text_value.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3 id="msg">来自<a href="#">&lt;&lt;新华社&gt;&gt;</a>的消息</h3>
  <h3 id="msg2"></h3>
  <h3 id="msg3"></h3>
  <script>
    var h3Msg=document.getElementById("msg");
    var h3Msg2=document.getElementById("msg2");
    var h3Msg3=document.getElementById("msg3");
    //想获取msg的内容
    console.log(h3Msg.innerHTML)    
    console.log(h3Msg.textContent) 
    //想修改msg2和msg3的内容
    var str=`来自<a href="#">&lt;&lt;新华社&gt;&gt;</a>的消息`; 
    h3Msg2.innerHTML=str;
    h3Msg3.textContent=str;  
  </script>
</body>
</html>

运行结果：

(3). 获取或修改表单元素的内容:

a. 问题: 绝大多数表单元素都是input元素，而input元素是单标记，没有结束标签，所以不能使用innerHTML和textContent来获取或修改内容
b. 解决: 今后只要获取或修改表单元素的值，都要用value代替innerHTML和textContent.

(4). 示例: 开关门效果：

0_door.html

<!DOCTYPE HTML>
<html>

<head>
  <title>读取并修改元素的内容</title>
  <meta charset="utf-8" />
  <style>
    div {
      float: left;
      width: 110px;
      height: 200px;
    }

    #d1{
      background-color:#ccff00;
      background-image:url(images/xsj.png);
      background-size:160% 80%;
      background-position:-30px 30px;
    }
    #d3 {
      background-image:url(images/men.png);
      background-size:110% 110%;
      background-position:-10px -10px;
      position:relative;
    }

    #d2 {
      cursor: pointer;
      background-color:#fff;
      position:absolute;
      width:40px; height:18px;
      text-align:center;
      top:65px;
      font-weight:bold;
      color:green;
      left:50%; margin-left:-20px;
    }
  </style>
</head>

<body>
  <div id="d1"></div>
  <div id="d3">
    <div id="d2">无人</div>
  </div>
  <script>
    //DOM 4步
    //1. 查找触发事件的元素
    //本例中: 点d2可以开关门
    var d2=document.getElementById("d2");
    //2. 绑定事件处理函数
    d2.onclick=function(){
      //3. 查找要修改的元素
      //本例中: 开关门是通过显示或隐藏d1(洗手间)来实现的
      var d1=document.getElementById("d1");
      //4. 修改元素
      //如果当前d2的内容是"无人"
      if(this.innerHTML=="无人"){
        //就关门
        d1.style.display="none"
        //相当于手工:
        //<div id="d1" style="display:none">
        d2.innerHTML="有人";
        d2.style.color="red";
      }else{//否则如果当前d2的内容是"有人"
        //就开门
        d1.style.display=""
        d2.innerHTML="无人";
        d2.style.color="green";
      }
    }
  </script>
</body>

</html>

运行结果:

2. 属性: 3种属性:

(1). 字符串类型的HTML标准属性:

a. 什么是: HTML标准中规定的，属性值为字符串的属性

b. 比如: class, id, name, value, href, title, ...

c. 如何: 2种方式:

1). 旧核心DOM4个函数:

i. 获取属性值: 元素对象.getAttribute("属性名")

获取属性

ii. 修改属性值:

元素对象.setAttribute("属性名", "新值")

修改属性

iii. 判断是否包含某个属性:

元素对象.hasAttribute("属性名")

有属性(吗?)

iv. 移除属性: 元素.removeAttribute("属性名")

移除属性

2). 新的简化版HTML DOM:

i. 新的HTML DOM已经将所有HTML标准属性，提前保存在了内存中的元素对象身上。只不过页面上暂时没用到的属性，默认值为""而已.

ii. 今后，只要操作HTML标准属性，就都可用".属性名"方式操作

iii. 如何用.代替以上四种操作：

①获取属性值: 元素对象.属性名

②修改属性值: 元素对象.属性名=属性值

③判断是否包含某个属性:

因为所有标准属性已经在元素对象身上了，只不过默认值为""，所以:

元素.属性名!=="" 说明包含该属性

④移除属性:

错误: ~~delete~~ ~~元素对象.属性名~~

正确: 元素对象.属性名=""

iv. 特例: class属性

问题: ES6基础语法中已经将class定义为关键字，有特殊功能，专门用于创建一种类型。所以，DOM标准就不能重复使用"class"这个属性名。

解决: 今后，在DOM中只要用.获取或修改元素的class属性值，都必须换成".className"。

但是，操作.className，就是在操作页面上元素的class属性。

d. 示例: 使用核心DOM和HTML DOM两种方式操作a元素的属性:

1_attribute.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a id="a1" href="http://tmooc.cn" title="前往tmooc">go to tmooc</a>
  <script>
    var a1=document.getElementById("a1");
    //获取a1的href属性
    // console.log(a1.getAttribute("href"));
    console.log(a1.href);
    //修改a1的title属性
    // a1.setAttribute("title","Welcome to tmooc");
    a1.title="Welcome to tmooc";
    //判断是否包含target属性
    // console.log(a1.hasAttribute("target"));//false
    console.log(a1.target!=="");//false 说明不包含
    //为a1添加target属性
    // a1.setAttribute("target","_blank")
    a1.target="_blank";
    //判断是否包含target属性
    // console.log(a1.hasAttribute("target"));//true
    console.log(a1.target!=="");//true 说明包含
    console.log(a1);
    console.dir(a1);
  </script>
</body>
</html>

运行结果:

e. 示例: 手风琴/伸缩菜单效果

1_menu.html

<!DOCTYPE HTML>
<html>

<head>
  <title>1. 实现伸缩二级菜单</title>
  <meta charset="utf-8" />
  <style>
    li {
      list-style: none;
    }

    li span {
      padding-left: 20px;
      cursor: pointer;
      background: url("images/add.png") no-repeat center left;
    }

    li ul {
      display: none;
    }

    .open {
      background: url("images/minus.png") no-repeat center left;
    }

    .open+ul {
      display: block;
    }
  </style>

</head>

<body>
  <ul class="tree">
    <li>
      <span class="open">考勤管理</span>
      <ul>
        <li>日常考勤</li>
        <li>请假申请</li>
        <li>加班/出差</li>
      </ul>
    </li>
    <li>
      <span>信息中心</span>
      <ul>
        <li>通知公告</li>
        <li>公司新闻</li>
        <li>规章制度</li>
      </ul>
    </li>
    <li>
      <span>协同办公</span>
      <ul>
        <li>公文流转</li>
        <li>文件中心</li>
        <li>内部邮件</li>
        <li>即时通信</li>
        <li>短信提醒</li>
      </ul>
    </li>
  </ul>
  <script>
    //DOM 4步
    //1. 查找触发事件的元素
    //本例中: 点击ul下li下所有span都能触发变化
    var spans=document.querySelectorAll(
      "ul>li>span"
    );
    //2. 绑定事件处理函数
    //本例中: 因为要给每个span绑定单击事件，所以要遍历找到的每个span
    for(var span of spans){
      span.onclick=function(){
        //3. 查找要修改的元素
        //4. 修改元素
        //如果当前点击的span的class是open，说明当前span是打开的，则只关闭自己即可！不用再遍历别人了
        if(this.className=="open"){
          this.className="";
          return;//停止执行当前函数，并退出当前函数。
        }

        //先找到ul下所有span
        var spans=
          document.querySelectorAll(
            "ul>li>span"
          );
        //遍历清除每个span上的class open，让所有的菜单暂时都隐藏
        for(var span of spans){
          span.className="";
        }
        //然后，再只给当前点击的一个span添加class open，只让当前一个菜单显示
        this.className="open";
      }
    }
  </script>
</body>

</html>

运行结果：

(2). bool类型的HTML标准属性:

a. 什么是: HTML标准中规定的，不需要写属性值，只靠属性名就可发挥作用的属性。

b. 比如:

1). checked: 用于标记一个checkbox是否被选中

2). disabled: 用于标记一个表单元素是否被禁用

... ...

c. 如何: 2种:

1). 即可用核心DOM 4个函数

i. 添加bool类型的HTML标准属性:

标准写法: 元素.setAttribute(“属性名”,”属性名”)

比如:

input.setAttribute(“disabled”,”disabled”);//禁用文本框

结果: <input disabled=“disabled”>

简写:

只要添加了disabled属性，就起作用，不给值也行

元素.setAttribute(“属性名”,””)

比如: input.setAttribute(“disabled”,””);//禁用文本框

结果: <input disabled=“”>

ii.移除bool类型HTML标准属性

元素.removeAttribute(“属性名”)

比如:

input.removeAttribute(“disabled”) //启用文本框

结果: <input disabled />

iii. 判断元素当前处于何种状态

元素.hasAttribute(“属性名”)

结果: 有哪个属性，就说明处于哪种状态

没有哪个属性，说明没有处于哪种状态

比如: input.hasAttribute(“disabled”)//判断文本框是启用，还是禁用

2). 又可用新HTML DOM来操作

元素.属性名

且属性值必须是bool类型的true或false。

比如:

判断元素现在处于何种状态: 元素.属性名

修改状态: 元素.属性名=bool值

总结:

(4). 如果通过复杂的查找条件，才能找到想要的元素时，就用按选择器查找: 2个方法

a. 只查找一个符合条件的元素:

var 一个元素=任意父元素.querySelector("任意选择器")

b. 查找多个符合条件的元素:

var 类数组对象=任意父元素.querySelectorAll("任意选择器")

2. 修改元素: 3种东西可修改

(1). 修改内容: 3种内容可修改:

a. 获取或修改元素的HTML内容:

元素.innerHTML

b. 获取或修改元素的纯文本内容:

元素.textContent

c. 获取或修改表单元素的值:

表单元素.value

(2). 修改属性: 3种

a. 字符串类型的HTML标准属性: 2种:

1). 旧核心DOM: 4个函数

i. 元素.getAttribute("属性名");

ii. 元素.setAttribute("属性名", "属性值")

iii. var bool=元素.hasAttribute("属性名")

iv. 元素.removeAttribute("属性名")

优点: 万能, 缺点: 繁琐

2). 新HTML DOM:

i. 元素.属性名

ii. 元素.属性名="属性值"

iii. 元素.属性名!==""

iv. 元素.属性名=""

优点: 简单, 缺点: 不万能

b. bool类型的HTML标准属性：2种

1). 旧核心DOM4个函数修改:

//启用某种状态

元素.setAttribute("属性名","属性名"或"")

//禁用某种状态

元素.removeAttribute("属性名")

//判断是否处于某种状态

元素.hasAttribute("属性名")

2). HTML DOM的"元素.属性名"，值为bool类型

//启用某种状态

元素.属性名=true

//禁用某种状态

元素.属性名=false

//判断是否处于某种状态

元素.属性名

这篇关于DOM的查找与修改的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

DOM的查找与修改

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯