JavaScript查找元素

原创 黄良钵  2017-07-12 20:40  阅读 15 次 评论 0 条

每个载入浏览器的 HTML 文档都会成为 Document 对象。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

document 表示当前整体文档对象

  1. <body>
  2.     <a class="red-link col-md-3" id="baiduID" href="https://www.baidu.com">百度<span>123<span>456</span></span></a>
  3.     <a class="red-link col-md-2" id="baiduID" href="https://www.baidu.com">百度123</a>
  4.     <input type="radio" name="sex" id="sex0" value="0">
  5.     <input type="radio" name="sex" id="sex1" value="1">
  6.     <input type="radio" name="sex" id="sex2" value="2">
  7. </body>

getElementById 获取指定id的标签或元素 要么是1个 要么是null

如果制定id不存在 会得到null 即空对象

  1. var baidu = document.getElementById('baiduID')

tagName 返回元素的标签名

  1. console.log(baidu.tagName) //a

textContent 设置或返回节点及其后代的文本内容

  1. console.log(baidu.textContent) //百度123456
  2.         // 获取id 
  3. console.log(baidu.id)    //baiduID

 

  1. var sex = document.getElementsByName('sex')
  2.         console.log(sex.tagName)
  3.         // 输出为undefined 未定义因为NodeList没有tagName
  4.         console.log(sex.length)
  5.         // length 可返回数组的长度
  6.         console.log(sex.item(1).tagName)
  7.         // item(1索引值)可返回节点列表中处于指定的索引号的节点        
  8.         for(var i = 0;i < sex.length;i++){
  9.             console.log(sex[i].value)
  10.             // sex是一个NodeList 所以通过[0]索引值获取列表中的第一个项
  11.             // 实际上索引从0开始计算 所以[x]表示x+1项
  12.         }
  1. var sex = document.getElementsByName('sex')[1]
  2.         //获取第二个name属性的值是sex的元素
  3.        // 如果不存 则是undefined
  4.  console.log(sex)

HTMLCollection 集合

  1. var inputs = document.getElementsByTagName('input')
  2.         // 通过标签名(不区分大小写)来获取一组标签
  3.         console.log(inputs)
  4.         console.log(inputs.length)
document.getElementsByClassName()
  1. var links = document.getElementsByClassName('col-md-3')
  2.         console.log(links[0].textContent)
  3.         // 通过class属性的值获取一组标签元素
  4.         // 使用任意一个样式类即可 不用全部写出来
  5.         console.log(links[0].innerHTML)
  6.         // innerHTML 得到标签内部的HTML 连同标签一起显示出来
  7.         console.log(links[0].innerText)
  8.         // 得到标签内部[所有]文本 即这个在子标签内也一样能得到
  9.         // querySelector()
  10.         // 使用css筛选器获取标签元素
  11.         var a = document.querySelector('#baiduID')
  12.         // 得到的是一个符合条件的标签元素
  13.         // 相当于querySelectorAll('#baiduID')[0]
  14.         console.log(a)
  15.         // querySelectorAll()        
  16.         var b = document.querySelectorAll('#baiduID')
  17.         console.log(b[0])

总结:

getElementById

getElementsByName

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

本文地址:https://xn--nf1a578axkh.xn--fiqs8s/735.html
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情