DOM的几种查找方法
通过ID获取元素
var 元素=document.documnetElement (“id名”)
<body>
<div id="time">2019-9-9</div>
<script>
//1.因为文档页面从上往下加载，所以先得有标签，所以script需要再下面
//2.get获得 element 元素 by 通过 驼峰命名法
//3.参数 ID是大小写敏感的字符串
//4.返回的是一个元素对象
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
//5.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>
通过标签获取元素
document.getElementsByTagName(“标签名”)
<body>
<ul>
<li>知否知否，应是绿肥红瘦1</li>
<ol id="ol">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ol>
</ul>
<script>
//返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
//2.我们想要一次打印里面的元素对象，我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
//3.如果页面中只有一个li 返回的还是伪数组的形式
//4.如果页面中没有这个元素返回的是一个空的伪数组
//5.element.getElementsByTagName('标签名');父元素必须是指定的单个元素
// var ol = document.getElementsByTagName('ol')
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
</script>
H5新增获取方法
getElementsByClassName 根据类名获取元素
var boxs = document.getElementsByClassName('box');
console.log(boxs);
querySelector 返回指定选择器的第一个元素对象 里面的选择器需要加符号.box #nav
ar firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
querySelectorAll()返回指定选择器所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
获取特殊元素
获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
获取HTML元素
var htmlEle = document.documentElement;
console.log(htmlEle);
739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
