获取元素节点
通过document对象调用
- getElementById() 通过Id属性获取一个元素节点对象
- getElementsByTagName() 通过标签名获取
- getElementsByName() 通过Name属性获取
获取元素节点的子节点
通过元素节点调用
- getElementsByTagName() 通过标签名获取
例如:
var city = docunment.getElementById("city"); # 查找city下所有的li节点 var lis = city.getElementsByTagName("li");
- 属性:childNodes 当前节点的所有子节点,这里的childNodes会将换行等空白也当做节点。调用属性的时候是不用加括号的。
- 属性:children 获取当前元素的所有子元素,这个属性只包括子元素而不包括文本节点。
- 属性:firstChild 获取当前节点的第一个子节点
- 属性:firstElementChild 获取当前元素的第一个子元素
- 属性:lastChild 获取当前节点的最后一个节点
获取父节点和兄弟节点
通过具体的节点调用
- 属性:parentNode (当前节点的父节点,一般父节点不会是文本,会是元素)
- 属性:previousSibling (获取当前节点的前一个兄弟节点)
- 属性:nextSibling(获取当前节点的后一个兄弟节点)
- 属性:previousElementSibling(获取当前元素的前一个兄弟元素,不包含空白文本
获取body标签
var body = document.body;
获取Html标签
var html = document.documentElement;
获取页面中的所有元素
# 方式1 var all = document.all; # 方式2 var all = document.getElementsByTagName("*");
获取类对象
var cls = document.getElementsByClassName("box1");
按照CSS元素选择器的方式查找元素节点
# 获取类名为box1下的div,下面的方法如果满足条件的有多个,只会返回第一个 var div = document.querySelector(".box1 div"); # 返回所有的情况 var divs = document.querySelectorAll(".box1");