• 当前标签:Document

程序开发 JavaScript查找元素

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

2017-07-12 20:40:44 31 0 0
阅读详情
  • 1
前往