JavaScript中的DOM查询方法(全)——配合练习熟练掌握dom查询方法

燕穗子姐姐

已于 2022-06-01 21:36:28 修改

阅读量3.2k

点赞数 5

分类专栏： JavaScript 文章标签：面试 javascript java 开发语言 c++

于 2022-04-25 15:04:12 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/124404065

版权

JavaScript DOM 查询方法元素节点事件处理

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

68 篇文章

订阅专栏

学习JavaScript中的DOM(文本对象模型)就是主要学习它的查询，查询是DOM的核心所在，而它围绕着一个单词—document

一、理解DOM

当HTML加载到内存中时，会形成一个树形结构，包括了四种类型的节点：(如下图)

        文档节点==>document
        元素节点==>标签
        属性节点==>标签的属性
        文本节点==>标签体

可以看到处于最上层的文档节点(document)可以访问下面的所有节点来获取对象进而操作对象。

二、 DOM的查询方法

document.getElementById(“id值”)	通过id属性获取一个元素节点对象
document.getElementsByName(“name属性值”)	通过name属性获取一组元素节点对象
document.getElementsByTagName(“标签名”)	可以根据标签名来获取一组元素节点对象
document.getElementByClassName(“class属性值”)	返回多个对象
obj.getElementsByTagName();	获取元素下的一组节点
obj.childNodes	会获取包括文本节点在内的所有节点
obj.children	可以获取当前元素的所有子元素，不包括空白文档了
obj.firstChild	第一个子节点(包括空白的文本节点)
obj.firstElementChild	获取当前元素的第一个子元素
obj.parentNode	获取当前元素的父元素
obj.previousSibling	返回前一个兄弟节点也有可能获取到空白的文本
obj. previousElementSibling	返回前一个兄弟元素，不包括空白文本注意：不支持ie8及以下的浏览器
document.body	获取body标签
document.documentElement;	获得html根元素
document.all	页面中的所有的元素
document.getElementsByTagName("*")	页面中的所有的元素
document.querySelector()	1、需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象 2、该方法总会返回唯一的元素，如果满足条件的元素是多个，那么它只会返回第一个 3、IE8以上的都适用
document.querySelectorAll()	1、该方法和qureySelector()用法类似，不同的是它将会将符合条件的元素封装到一个数组中返回 2、即使符合条件的元素只有一个，它也会返回数组

三、dom查询练习

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="./css/css.css" />
  </head>

  <body>
    <div id="total">
      <div class="inner">
        <p>你喜欢哪个电影?</p>

        <ul id="movie">
          <li id="bj">北京，我爱你</li>
          <li>爱上西雅图</li>
          <li>叶问3</li>
          <li>前任3</li>
        </ul>

        <br />
        <br />

        <p>你喜欢哪款游戏?</p>

        <ul id="game">
          <li id="rl">王者荣耀</li>
          <li>消消乐</li>
          <li>极品飞车</li>
          <li>魔兽</li>
        </ul>

        <br />
        <br />

        <p>你手机的操作系统是?</p>

        <ul id="phone">
          <li>IOS</li>
          <li id="android">Android</li>
          <li>Windows Phone</li>
        </ul>
      </div>

      <div class="inner">
        gender:
        <input class="hi" type="radio" name="gender" value="male" />
        Male
        <input class="hi" type="radio" name="gender" value="female" />
        Female
        <br />
        <br />
        name:
        <input type="text" name="name" id="username" value="abcde" />
      </div>
    </div>
    <div id="btnList">
      <h3>需求如下：</h3>
      <div><button id="btn09">查找#bj节点</button></div>
      <div><button id="btn10">查找所有li节点</button></div>
      <div><button id="btn11">查找name=gender的所有节点</button></div>
      <div><button id="btn12">获取class名为inner的节点</button></div>
      <div><button id="btn01">查找#city下所有li节点</button></div>
      <div><button id="btn02">返回#city的所有子节点</button></div>
      <div><button id="btn03">返回#phone的第一个子节点</button></div>
      <div><button id="btn04">返回#bj的父节点</button></div>
      <div><button id="btn05">返回#android的前一个兄弟节点</button></div>
      <div><button id="btn06">返回#username的value属性值</button></div>
      <div><button id="btn07">设置#username的value属性值</button></div>
      <div><button id="btn08">返回#bj的文本值</button></div>
    </div>
  </body>
</html>