获取元素的方式
1.DOM方式
逻辑性不强,繁琐
<div>woshi1</div>
<span>woshispan</span>
<ul>
<li>我是Li</li>
<li>我是Li</li>
<li>我是Li</li>
<li>我是Li</li>
</ul>
<div class="box">
<span class="er"></span>
</div>
我们要一个个获取 比如获取var ul = document.querarySelector('div'),然后获取ul里面的li,我们还要写var lis = ul.querySelectorAll('li'),比较繁琐
2.利用节点的层次关系,父子兄
逻辑性强,但是兼容性较差
节点
页面中的所有内容都是节点
节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)
元素节点nodeType为1,属性节点2,内容节点3,我们主要操作元素节点。
节点操作-父节点parentNode
返回最近的父节点,找不到返回null
<div class="box">
<span class="er"></span>
</div>
<script>
//父节点 parentNode
var er = document.querySelector('.er');
// var box = document.querySelector('.box');之前
//拿到父节点 得到的离元素最近的父节点 找不到返回null
console.log(er.parentNode);
</script>
节点操作-子节点
childNodes得到所有的(亲)子节点,包括元素节点和文本节点属性节点等
<ul>
<li class="lii">woshi1i</li>
<li>woshi1i</li>
<li>woshi1i</li>
<li>woshi1i<span>123</span></li>
</ul>
// Dom
var ul = document.querySelector('ul');
// var lis = document.querySelectorAll('li');//之前
//子节点 childNodes得到所有的子节点,包含元素节点和文本节点等等