Summer cloud

javaScript DOM获取元素和节点

获取元素

根据ID获取标签元素

var div1=document.getElementById("div1");

根据标签名获取标签列表

var divs=document.getElementsByTagName("div");

根据标签名获取元素子标签列表

var divs=diva.getElementsByTagName("div"); (如果使用元素调用,就是指当前这个元素diva的子元素的标签名是div的)

根据className获取标签列表

var div0 =document.getElementsByClassName("div0");

根据className获取元素子标签列表

var div0=diva.getElementsByClassName("div0");

兼容性:上述方法仅用于IE8以后

根据选择器获取到第一个找到的元素

var div=document.querySelector("div");
//获取第一个div标签
var div1=document.querySelector("#div1");
//获取ID为div1的标签
var div0=document.querySelector(".div0");
//获取class为div0的第一个标签
var div0=document.querySelector("#diva>.div0");
//获取id为diva的标签第一层子元素中class为div0的第一个元素
var ps=document.querySelector("[name=password]");
//获取具有name属性且属性值为password的第一个子元素

根据选择器获取到所有的元素(形成列表)

var div=document.querySelectorAll("div");

获取节点

根据name获取节点列表Nodelist(仅可使用document)

var sexs=document.getElementsByName("sex");

diva.childNodes//子节点

diva.children//子元素

diva.parentNode//父节点

diva.parentElement//父元素

diva.firstChild//第一个子节点

diva.firstElementChild//第一个子元素

diva.lastChild//最后一个子节点

diva.lastElementChild//最后一个子元素

diva.nextSibling//下一个兄弟节点

diva.nextElementSibling//下一个兄弟元素

diva.previousSibling//上一个兄弟节点

diva.previousElementSibling//上一个兄弟元素

Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:Summer Cloud Blog » javaScript DOM获取元素和节点
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x