‘’‘js
Dom: 操作页面元素(增删改查)
1.查找：
一.通过元素间的关系查找
1)父子关系
parentElement 查找一个元素的父元素
console.log(ceshi.parentElement) //查找id为ceshi的父元素
ceshi.parentElement.style.backgroundColor='#ccf'; //设置ceshi父元素的背景色
children 查找一个元素的所有子元素(输出为数组形式)
console.log(ceshi.children); //查找id为ceshi的所有子元素(!结果为数组形式!)
ceshi.children[2].style.color='#f00';//给ceshi的子元素中下标为2的设字体颜色
var a=ceshi.children; //给ceshi的所有子元素的设置字体颜色
for(var i=0;i
ceshi.children[i].style.backgroundColor='#0f0';
}
console.log(ceshi.children[2].children[0].children[2])
var b=ceshi.children[2].children[0].children[2];
b.style.color='#50f';
firstElementChild 查找一个元素的第一个子元素(输出为原来的形式)
lastElementChild 查找一个元素的最后一个子元素(输出为原来的形式)
// console.log(ceshi.firstElementChild.)
2）兄弟关系
previousElementSibling 前一个兄弟
nextElementSibling 下一个兄弟
找 阳光的快乐生活
var c=ceshi.firstElementChild.nextElementSibling.children[0].firstElementChild.nextElementSibling;
console.log(c);
c.style.backgroundColor='#00f';
找 回村的诱惑
var d=ceshi.children[2].previousElementSibling.firstElementChild.lastElementChild;
console.log(d);
d.style.color='#ff0';
找 儿子去哪儿
var e=ceshi.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild.lastElementChild
console.log(e);
e.style.backgroundColor='#0ff';
二.通过HTML查找
1）通过id查找
var ele=document.getElementById('id号'); //只能找到一个
var id=document.getElementById('ceshi');
console.log(id);
id.style.backgroundColor='#f0f';
2)通过class查找
var ele=document.getElementsByClassName('class名'); //可以找到多个 并且返回一个动态集合(数组)
var main=document.getElementsByClassName('main');
console.log(main);
main[0].style.backgroundColor='#ff0';
3)通过标签名查找
var ele=document.getElementsByTagName('标签名') //可以找到多个 并且返回一个动态集合(数组)
var li=document.getElementsByTagName('li');
console.log(li);
for(var i=0;i
li[i].style.color='#c2c';
};
4)通过name属性查找
var ele=document.getElementsByName('name'); //可以找到多个 返回动态集合 (数组)
var uname=document.getElementsByName('uname');
console.log(uname)
三.通过选择器查找
1) var ele=document.querySelector('选择器'); //只能找到一个
var lia=document.querySelector('#ceshi>li>ul>li:last-child');
console.log(lia);
lia.style.color='#f0f';
2) var ele=document.querySelectorAll('选择器'); 查找所有 返回动态集合 (数组)
var liall=document.querySelectorAll('.main>li');
console.log(liall);
for(var i=0;i
liall[i].style.backgroundColor='#cf0';
}
‘’‘
网友评论