<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id='ceshi'>
<li>
电影
<ul>
<li>后来的我们</li>
<li>复仇者联盟</li>
<li>死侍</li>
</ul>
</li>
<li>
电视剧
<ul>
<li>乡村爱情</li>
<li>杨光的快乐生活</li>
<li>亮剑</li>
<li>回村的诱惑</li>
</ul>
</li>
<li>
综艺
<ul class="main">
<li>跑男</li>
<li>跨界歌王</li>
<li>创造101</li>
<li>儿子去哪儿</li>
</ul>
</li>
<li>
动漫
<ul>
<li>海贼王</li>
<li>不良人</li>
<li>尸兄</li>
<li>天线宝宝</li>
</ul>
</li>
</ul>
<input name="uname"></input>
<script>
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<a.length;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.length;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.length;i++){
liall[i].style.backgroundColor='#cf0';
}
</script>
</body>
</html>
网友评论