‘’‘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';
? ? ? ? ? ? ? }
‘’‘
