javaScript 获取HTML DOM元素的方法

javascript 获取HTML DOM元素的方法

getElementById()

获取页面中已经存在的HTML标签,DOM节点,元素对象;

var btn = document.getElementById("btn")

// 参数:字符串 id 值；
// 返回:DOM节点（元素对象）,如果页面中没有这个DOM节点，返回null(复杂数据类型，代表空);
// 元素对象---->属性和方法的集合；

返回body

返回body DOM节点

var body = document.body;

getElementsByTagName()

可以实时动态的根据标签名字获取元素，动态新增的也可以获取。

var ipts = document.getElementsByTagName("input")

// 参数：TagName，标签名，字符串；
// 返回：拥有标签名的伪数组，成员是DOM节点；可以 for循环；

getElementsByClassName()

var btns = document.getElementsByClassName("btn");

// 参数：ClassName，类名，字符串；           
// 返回：拥有类名的伪数组，成员是DOM节点；可以for循环；

注意：页面中元素只有一个，返回的是伪数组；IE8以及以前版本不兼容

querySelector()

H5新增,移动端常用，（IE6~8下不兼容）。

var box = document.querySelector("#box");

// 参数：CSS选择器   #box    .box     img           
// 返回：第一个DOM节点；

querySelectorAll()

H5新增 ,移动端常用，（IE6~8下不兼容）。

var btns = document.querySelectorAll(".btn");

// 参数：CSS选择器   #box    .box     img           
// 返回：所有满足条件的DOM节点；返回伪数组，可遍历；

getElementsByName()

通过name属性获取DOM元素

在IE浏览器中只能获取到表单元素，当然我们一般也只用它获取表单元素，从ie10开始可以不只是表单元素。