获取元素 JavaScript

获取元素

如何获取页面元素

DOM在我们实际开发中主要用来操作元素

我们如何获取页面中的元素呢？

获取页面中的元素可以使以下几种方式：

• 根据 ID 获取
• 根据标签名获取
• 通过 HTML5 新增的方法获取
• 特殊元素获取

根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象

<div id="time">2019-9-9</div>
<script>
	var timer = document.getElementById('time')
    console.log(timer);  // <div id="time">2019-9-9</div>
    console.log(typeof timer);  // object
    console.dir(timer);  // div#time...
</script>

1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
2. get 获得 element 元素 by 通过 驼峰命名法
3. 参数 id是大小敏感的字符串
4. 返回的是一个元素对象
5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法

根据标签名获取

还可以获取某个元素(父元素)内部所有指定标签名的子元素

element.getElementByTagName('标签名');

注意：父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己

<ul>
    <li>知否知否，应是等你好久1</li>
    <li>知否知否，应是等你好久2</li>
    <li>知否知否，应是等你好久3</li>
    <li>知否知否，应是等你好久4</li>
    <li>知否知否，应是等你好久5</li>
</ul>
<ol>
    <li>生僻字1</li>
    <li>生僻字2</li>
    <li>生僻字3</li>
    <li>生僻字4</li>
</ol>
<ol id="ol">
    <li>id 1</li>
    <li>id 2</li>
</ol>

<script>
	// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    var lis = document.getElementBuTagName('li');
    console.log(lis);  // [li, li, li, li, li, li, li, li, li]
    console.log(lis[0]);  // <li>知否知否，应是等你好久1</li>
	// 2.我们想要依次打印里面的元素对象 我们可以采取遍历的方式
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 3.如果页面中只有一个li 返回的还是伪数组的形式
    // 4.如果页面中没有这个元素 返回的是空的伪数组的形式
    // 5.element.getElementByTagName('标签名');
    var ols = document.getElementByTagName('ol');  // [ol, ol]
    console.log(ols.getElementByTagName('li'));  // 报错，因为这里的ols为父元素，父元素必须是单个对象，这里是伪数组
    console.log(ols[0].getElementByTagName('li'));  // [li, li, li, li]
    var ol = document.getElementById('ol');  // 一般用id指定父元素
    console.log(ol.getElementByTagName('li'));  // [li, li]
</script>

注意：

1. 因为得要的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
2. 得到的元素对象是动态的

通过 HTML5 新增的方法获取

1. document.getElementsByClassName(‘类名’); // 根据类名返回元素对象集合
2. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
3. document.querySelectorAll(‘选择器’); // 根据指定选择器返回

<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ul id="nav">
    <li>xxx1</li>
    <li>xxx2</li>
    <li>xxx3</li>
</ul>
<script>
	// 1. getElementsByClassName 根据类名获得某些元素集合
    var boxs = document.getElementsByClassName('box');
    console.log(boxs); // [div.box, div.box]
    // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box #nav
    var firstBox = document.querySelector('.box');
    console.log(firstBox); // <div class="box">盒子1</div>
    var nav = document.querySelector('#nav');
    console.log(nav); // <ul id="nav">...</ul>
    var li = document.querySelector('li');
    console.log(li); // <li>xxx1</li>
    // 3. querySelectorAll() 返回指定选择器的所有元素对象集合
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);  // [div.box, div.box]
    var lis = document.querySelectorAll('li');
    console.log(lis);  // [li, li, li]
</script>

获取特殊元素 ( body, html )

获取body元素

document.body // 返回body元素对象

<script>
	var bodyEle = document.body;
    console.log(bodyEle);
    console.dir(bodyEle);
</script>

获取html元素

document.documentElement // 返回html元素对象

<script>
	// var htmlEle = document.html;  //报错
	var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>