JavaScript查找元素

每个载入浏览器的 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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇