前端基础学习笔记-JS 获取元素 字符串拼接 数据类型

1.获取元素

通过id名

document.getElementById("box")//获取的唯一的元素

通过class名

document.getElementsByClassName("wrap")//获取所有具有wrap类名的标签集合 //Elements 注意加上s 大小写不能错 当找不到元素时,返回null 意为空,当写错时,直接报错,提示没有这个方法 console.log(aWrap)//HTMLCollection

没有反应时看以下四项找问题：

==> 1. HTMLcollection 是元素集合,不能拿来当做元素操作,通过下标序号获取元素

==> 2. 由于数字的特殊性,不能使用 . 操作 , 而是使用 [ ] 代替 序号从 0 开始

==> 3. 哪怕页面中,只有一个wrap类名的元素,获取的也是一个集合,集合里只有一个元素罢了

==> 4. class获取的方式,低版本ie( ie8及以下 )不兼容

通过标签名

document.getElementsBytagName("div")//获取所有div标签 console.log(aDiv)//HTMLCollection 特性同className一样

其返回的也是集合！ 

通过name值

document.getElementsByName("name") //获取所有此name值的标签 console.log(aWrap)//nodeList 节点集合 特性同className一样

其返回的也是集合！ 

document是文档对象模型DOM,可以替换成任何标签节点,只要符合后代关系 如:

box.getElementsByTagName("p") //box 的后代 p 
//1.确保box是元素 而不是集合 2.确保p确实是box的后台 3.如要最终取到p ,依然要加序号
// name方式获取的方法只能挂在 document后面

css选择器获取 单个元素

document.querySelector("#box p")//通过css选择器获取,支持ie8及以上 写法和选择器一样 //只获取到 满足条件的第一个元素,获取到就会停止

css选择器获取 集合

document.querySelectorAll("#box p")//通过css选择器获取,支持ie8及以上 写法和选择器一样 //获取到满足选择器的所有元素 ==> 节点集合,通过序号获取元素 (性能比较慢:通篇查询 从里及外 )

特殊元素的获取

document.documentElement