JS---DOM获取元素

zyt0502

于 2024-08-14 17:21:50 发布

阅读量353

点赞数 3

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/zyt0502/article/details/141191127

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、DOM操作---获取元素

1.1获取元素的方法

方法	作用
getElementById	根据id名获取元素
[ele/document].getElementsByTagName	根据标签名获取元素
[ele/document].getElementsByClassName(className)	根据类名获取（不兼容ie6~8）
document.getElementsByName()	根据name属性获取元素
[ele/document].querySelector()	根据选择器获取（选择器第一个满足选择器条件的）
[ele/document].querySelectorAll()	根据选择器获取（选择所有满足选择器条件的，返回nodeList（类数组对象））
document.head	获取Head元素对象
document.body	获取body元素对象
document.documentElement	获取html元素对象
document.documentElement.clientHeight/clientWidth	获取一屏幕的高度或者宽度，兼容所有的浏览器
children	获取所有子元素的集合
firstElementChild	获取第一个子元素
lastElementChild	获取最后一个子元素
previousElementSibling	获取上一个兄弟元素
nextElementSibling	获取下一个兄弟元素

1.2示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>京东商城</title>
  </head>
  <body>
    <div id="box">aaa</div>
    <h1>111</h1>
    <img src="" alt="" />
    <p>段落1</p>
    <p class="one">段落2</p>
    <p class="one">段落3</p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore,
      atque! Vero natus dolores deleniti est! Repellendus laboriosam, dolor
      delectus dolorem facere mollitia recusandae dolorum fuga, commodi, natus
      sit? Aliquam, sit!
    </p>
    <div id="box2">
      <p class="one">段落5</p>
      <p>段落6</p>
      用户名：<input type="text" name="username" value="" /> <br />
    </div>

    <!-- 表单标签 -->
    用户名：<input type="text" name="username" value="" /> <br />
    密码：<input type="password" name="pwd" value="" />
  </body>
  <script>
    //获取元素(标签)的方法---9
    //1. 通过id获取,id可以直接获取  document.getElementById("id名")
    console.log(document.getElementById("box"));
    console.log(box);

结果图1：

    //2.通过标签名获取[ele/document].getElementsByTagName("标签名") 集合
    console.log(document.getElementsByTagName("p"));
    console.log(box2.getElementsByTagName("p"));

结果图2：

    //3.通过类名获取[ele/document].getElementsByClassName("class名")  集合
    console.log(document.getElementsByClassName("one"));
    console.log(box2.getElementsByClassName("one"));

结果图3：

//4.通过name(表单)获取document.getElementsByName("name值") 集合
    console.log(document.getElementsByName("username"));

结果图4：

    //5.通过选择器获取 *****
    //[ele/document].querySelector("选择器") 只能获取第一个符合条件的元素
    //[ele/document].querySelectorAll("选择器") 获取满足条件的集合
    console.log(document.querySelector("#box"));
    console.log(document.querySelector("#box2 p"));
    console.log(document.querySelectorAll("#box2 p"));
    console.log(box2.querySelectorAll("p"));
    console.log(document.querySelectorAll("input"));
    console.log(document.querySelectorAll(".one"));

结果图5：

    //6.获取head标签
    console.log(document.head);

结果图6：

 //7.获取body标签
    console.log(document.body);

结果图7：

    //8.获取html标签
    console.log(document.documentElement);

结果图8：

    //获取屏幕的高度或者宽度  clientHeight高度   clientWidth宽度
    console.log(
      document.documentElement.clientHeight || document.body.clientHeight
    );
    console.log(
      document.documentElement.clientWidth || document.body.clientWidth
    );