<div class="div0">1</div>
<div id="diva">
<div></div>
<div class="div0">2</div>
<div></div>
<div class="div0"></div>
<div id="div1"></div>
</div>
<form action="">
<!-- 所有的表单必须写name -->
<input type="text" name="names">
<input type="password" name="password">
<input type="radio" name="sex" value="男">
<input type="radio" name="sex" value="女">
<input type="submit">
</form>
参考以上代码分析JS获取HTML DOM元素的方法
1.(1)根据id获取标签元素
var div1=document.getElementById("div1");
(2)根据标签名获取标签列表
var divs=document.getElementsByTagName("div");
(3)根据className获取标签列表
var div0=document.getElementsByClassName("div0");
说明:
getElementsByTagName和getElementsByClassName获取到的都是HTMLCollection列表(里面只有标签元素),即HTML列表
获取id必须使用document调用getElementById,不能使用父元素调用
2.仅用于IE8以后
(1)根据选择器获取第一个找到的元素
var div=document.querySelector("div");
var div1=document.querySelector("#div1");
var div0=document.querySelector(".div0");
var div0=document.querySelector("#diva>.div0");
var ps=document.querySelector("[name=password]");
(2)根据选择器获取所有的元素
var div=document.querySelectorAll("div");
(3)var diva=document.querySelector("#diva");
console.log(diva.childNodes); //获取子节点
console.log(diva.children); //获取子元素,常用
console.log(diva.parentNode); //父节点
console.log(diva.parentElement); //父元素
console.log(diva.firstChild); //第一个子节点
console.log(diva.firstElementChild); //第一个子元素
console.log(diva.lastChild); //最后一个子节点
console.log(diva.lastElementChild); //最后一个子元素
console.log(diva.nextSibling); //下一个兄弟节点
console.log(diva.nextElementSibling); //下一个兄弟元素
console.log(diva.previousSibling); //上一个兄弟节点
console.log(diva.previousElementSibling); //上一个兄弟元素