通过DOM方法获取元素

原创 2019-01-17 21:59:52 341
摘要:HTML 文档中的所有内容都是节点:    1、整个文档是一个文档节点;    2、每个 HTML 元素是元素节点;    3、HTML 元素内的文本是文本节点;    4、每个 HTML 属性是属性节点注释是注释节点;可通过JavaScr

HTML 文档中的所有内容都是节点:

    1、整个文档是一个文档节点;

    2、每个 HTML 元素是元素节点;

    3、HTML 元素内的文本是文本节点;

    4、每个 HTML 属性是属性节点注释是注释节点;

可通过JavaScript对DOM进行访问。

所有HTML元素被定义为对象。

方法是能够执行的动作。

属性是能够获取或设置的值。

常用的DOM方法:

    1、getElementById(id)通过id获取元素

    2、 getElementsByClassName(class)通过class获取元素 

    3、 getElementsByTagName(Tag)通过标签名获取元素 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用CSS选择器来获取元素</title>
</head>
<body>
    <ul id="ul">
        <li class="red">列表项01</li>
        <li>列表项02</li>
        <li class="green">列表项03</li>
        <li class="green">列表项04</li>
        <li class="coral large">列表项05</li>
    </ul>
    <script>
         let lists = document.querySelectorAll('li');
         console.log(lists);
         lists[0].style.backgroundColor = 'coral';
         lists.item(1).style.backgroundColor = 'lightblue';
    </script>
</body>
</html>


批改老师:灭绝师太批改时间:2019-01-18 09:18:09
老师总结:一定要分清楚每种dom方法获取的是元素还是元素集合哦!

发布手记

热门词条