元素获取?

最新推荐文章于 2023-01-05 11:42:11 发布

weixin_33774615

最新推荐文章于 2023-01-05 11:42:11 发布

阅读量77

点赞数

原文链接：https://juejin.im/post/5c31c5e86fb9a049aa6f3b0c

版权

、、<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    h3 {

    }

    .title {

    }

    #title {
      background-color: red;
    }

  </style>
</head>
<body>
   <!-- <h3 class="text" id="title">132123</h3> -->
   <h3 class="text" >132123</h3>
   <h3 class="text" >132123</h3>
   <h3 class="text" >132123</h3>

   <!-- <div id="title">title1</div> -->
   <div id="one">title1</div>
   <div id="two">title1</div>
  <script>
    // ES DOM BOM
    // DOM(文档对象模型) 提供了一些操作html页面元素的方法
    // DOM元素（DOM对象）
    // 我们要想操作页面中元素 需要先通过JS获取到这个元素
    
    // 浏览器解析页面时 会在JS中提供一个叫document文档对象，在这个文档对象里提供了很多属性和方法 供我们来操作页面中的元素

    // html页面 document文档
    // console.log(document) // 文档对象
    // console.log(typeof document)
    // console.dir(document) // 显示详细信息

    // 在整个html文档中 通过id名来获取元素
    // var dom = document.getElementById('title') // id名获取是一个元素
    // console.log('id', dom)
    // dom.innerHTML = 'id的内容改变了'

    // {0: h3, 1: h3} 元素集合（类数组）并不是数组
    // 返回的始终是一个元素集合 获取到元素都在这个集合里
    // var doms = document.getElementsByClassName('text')
    // doms[0].innerHTML = '集合中第一个元素'
    // console.log(doms)
    // console.log(doms.length) // 集合中元素个数
    // console.log(typeof doms) // "object"

    // 获取元素 是对象类型的 我们可以像普通对象一样 修改它的属性值（获取）
    // console.log(dom)
    // console.log(typeof dom)
    // console.log(dom.id)
    // console.log(dom.className)

    // 元素特征 key/value 形式
    // 属性名是数字（索引）默认从0开始排列的
    // 自带length属性 代表当前集合的长度（有几个元素）

    // [h3, h3, h3]
    // 如果想要获取到集合中某个元素 你需要通过索引 集合名[索引值]

    // 通过标签名
    // var list = document.getElementsByTagName('h3')
    // console.log(list[0])


    // 获取DOM元素
    // 1.通过ID名 获取某一个元素 document.getElementById(id名)
    // 如果没有获取到返回null
    // 如果有多个重复id 获取的是第一个
    var id = document.getElementById('title')
    console.log(id)
    // 2.通过类名
    // 如果没有获取到返回 空的元素集合
    var list = document.getElementsByClassName('text')
    console.log(list)
    console.log(list[0])
    console.log(list[1])
    console.log(list[2])
    // 3.通过标签名
    // 如果没有获取到返回 空的元素集合
    var collect = document.getElementsByTagName('p')
    console.log(collect)

    // innerHTML 识别内容中标签
    // innerText 只能以普通文本形式输出

    one.innerHTML = '<h3>我是包含html的内容</h3>'
    two.innerText = '<h3>我是包含html的内容</h3>'
  </script>
</body>
</html>
复制代码

weixin_33774615

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素获取?

、、&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
复制链接

扫一扫