标签：ol console DOM JavaScript cla li var document

获取元素

• 根据 ID 获取元素

语法: document.getElementById(id)

<div id='time'>2020-01-09</div>

<script>
    var timer = document.getElementById('time');
    console.log(timer); // 根据 ID 获取
    // 查看里面的属性和方法
    console.dir(timer)
</script>

• 根据标签名获取元素

语法: document.getElementsByTagName('标签名')

<ul>
    <li>u1</li>
</ul>

<ol id="ol">
    <li>ol</li>
</ol>

<script>
    // 根据元素名获取
    var lis = document.getElementsByTagName('li');
    console.log(lis);  // HTMLCollection(2) [li, li] 返回所有的 ol和ul 的 li 元素 是复数

    // 可以通过ele 继续获取元素名
    var ol_ele = document.getElementById('ol');
    var ol_lis = ol_ele.getElementsByTagName('li');
    console.log(ol_lis);  // ol 下所有的li

</script>

• 根据类名获取元素  H5 新增

语法: document.getElementsByClassName('类名')

<div class="cla"></div>
<script>
    var cla = document.getElementsByClassName('cla');  // HTMLCollection [div.cla] 返回对象集合，需要使用对象 得取第一个元素，第二个是length
    console.log(cla);
</script>

• 选择器方式获取元素 H5新增

语法: 
document.querySelector('选择器')
document.querySelectorAll('选择器')

<div class="cla"></div>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<script>
    var cla = document.querySelector('.cla'); // 返回对象元素， 如果是class 则写.类名，id 则写#id
    console.log(cla);

    var lis = document.querySelectorAll('li');  // 返回所有对象集合
    console.log(lis);
</script>

• 获取特殊元素(body, html)

document.body;  // body
document.documentElement; // html

标签：ol,console,DOM,JavaScript,cla,li,var,document
来源： https://www.cnblogs.com/py-web/p/12172794.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。