JavaScript重新学习、捡漏 (8)
对于Web API的学习也是,不用就很快忘记了,多学勤用!做好总结,以便再次复习使用。
对于 document
的解读,是整个页面文档,可以获取到页面内所有的元素,包括body、html,element
是获取到的Element对象,只能获取自己的子孙元素
关于元素的获取
- 通过id获取可以使用
document.getElementById('id')
获取到元素,返回值是一个Element对象,因为id在页面是唯一的
,所以获取的是单个标签 - 通过标签名获取元素:
document.getElementByTagName('div')
,获取到页面所有的div标签元素,返回一个伪数组,数组元素是Element对象 - 在Html5中,新出了一个API
getElementByClassName('className')
,通过类名可以获取到元素,返回值也是一个伪数组 - 以上的使用可能会觉得有点麻烦,别着急,还有这个,
querySelector('.className or #idName')
,不过需要注意的是这个标签只返回对应元素的第一个 - 为了解决
querySelector('.className or #idName')
只返回第一个的缺点,我们可以使用这个querySelectorAll('.className or #idName')
,返回的是一个伪数组 - 获取body以及html标签:body使用
document.body
, html使用document.documentElement
console.dir()
可以显示一个对象的所有属性和方法
InnerText 和 innerHtml的区别
innerText | innerHtml |
---|---|
获取标签内的文字,自动删除空格等,不会渲染标签 | 获取元素里边的所有内容,包括空格标签等,可以渲染标签 |