JavaScript查找元素 - 会coding的HAM

JavaScript查找元素

BG7ZAG

|

2017-7-12 20:40

|

1,646

|

0

|

616 字

|

3 分钟

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

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

document 表示当前整体文档对象

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

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

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

var baidu = document.getElementById('baiduID')

tagName 返回元素的标签名

console.log(baidu.tagName) //a

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

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

var sex = document.getElementsByName('sex')
console.log(sex.tagName)
// 输出为undefined 未定义因为NodeList没有tagName
console.log(sex.length)
// length 可返回数组的长度
console.log(sex.item(1).tagName)
// item(1索引值)可返回节点列表中处于指定的索引号的节点
for(var i = 0;i < sex.length;i++){
console.log(sex[i].value)
// sex是一个NodeList 所以通过[0]索引值获取列表中的第一个项
// 实际上索引从0开始计算所以[x]表示x+1项
}

var sex = document.getElementsByName('sex')[1]
//获取第二个name属性的值是sex的元素
// 如果不存则是undefined
console.log(sex)

HTMLCollection 集合

var inputs = document.getElementsByTagName('input')
// 通过标签名(不区分大小写)来获取一组标签
console.log(inputs)
console.log(inputs.length)

document.getElementsByClassName()

var links = document.getElementsByClassName('col-md-3')
console.log(links[0].textContent)
// 通过class属性的值获取一组标签元素
// 使用任意一个样式类即可不用全部写出来
console.log(links[0].innerHTML)
// innerHTML 得到标签内部的HTML 连同标签一起显示出来
console.log(links[0].innerText)
// 得到标签内部[所有]文本即这个在子标签内也一样能得到
// querySelector()
// 使用css筛选器获取标签元素
var a = document.querySelector('#baiduID')
// 得到的是一个符合条件的标签元素
// 相当于querySelectorAll('#baiduID')[0]
console.log(a)
// querySelectorAll()
var b = document.querySelectorAll('#baiduID')
console.log(b[0])

总结：

getElementById

getElementsByName

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

Document JavaScript

暂无评论

发送评论编辑评论

Markdown

悄悄话

邮件提醒

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!