DOM基础

JavaScript学习 本文总阅读量次

DOM元素的获取方法

DOM元素可以理解为html文件中的元素（但实际上DOM由HTML解析而来），可以通过DOM查找（获取）方法获取在js文件（script）中对应的html文件中的元素。

注意： document.xxx来获取DOM元素是在document内部获取匹配的元素，替换成DOM元素A.xxx则表示在DOM元素A内部获取匹配的元素，所以只要知道父元素的限定条件，就可以通过DOM元素的获取方法轻松获取该父元素内部的各个子元素

获取1个DOM元素

getElementByld()

根据id得到一个元素/对象

  • 语法:document.getElementByld("id")
  • 功能:返回对拥有指定ID的第一个对象的引用
  • 返回值:DOM对象
  • 说明:id为DOM元素上id属性的值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <body>
        <div class="box" id="box">
            元素1
        </div>
        <script>
            //获取id为box的这个元素
            var box = document.getElementById("box"); 
            console.log(box);
        </script>
    </body>

lastChild与lastElementChild

  • 他们都是获取元素的最后一个 子元素
  • lastChild是IE8之前旧版本写法，可获取的包括注释节点。
  • 随着更新，出现新方法选取子节点，同时可以进行过滤，lastElementChild就只获取元素节点。
  • Element.lastElementChild
  • lastChild例子：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <body>

    <ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
    <ul id="myList2"><li>Water</li><li>Milk</li></ul>
    <p id="demo">单击按钮将项目从一个列表移动到另一个列表中</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var node=document.getElementById("myList2").lastChild;
    	document.getElementById("myList1").appendChild(node);
    }
    </script>
    最终效果

firstChild与firstElementChild

  • 同上，他们都是获取元素的第一个 子元素
  • firstChild是IE8之前旧版本写法，可获取的包括注释节点。Element.firstElementChild返回对象的第一个子元素

querySelector()

  • querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素。
    • 如果需要返回所有的元素，请使用 querySelectorAll() 方法。
  • 语法：document.querySelector(CSS selectors)
    • CSS selectors:字符串，需要引号。
      • 指定一个或多个用于匹配元素的 CSS 选择器。
      • 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。
      • 对于多个选择器，使用逗号隔开。
      • 最终只返回第一个匹配的元素。

例子：
获取文档中 id=”demo” 的元素：

1
document.querySelector("#demo");

完整例子

获取多个DOM元素（集合）

  • 注意：通过以下方法得到的都是DOM元素的集合，也就是NodeList 对象，是一个类数组。
  • 返回值： NodeList 对象。
    • node：节点，即DOM元素。=> NodeList:节点组成的数组。
    • 可以通过索引访问指定DOM元素，索引值从 0 开始。
    • NodeList 对象的 length 属性：获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。
  • getElementsByTagName()和getElementsByClassName()都有s！！要和getElementById()区分开！！

getElementsByTagName()

注意：

  1. 前面是document就会获取整个body中的“tag”，如果想要获取指定id下的“tag”可以和上面的语法叠加使用。
  2. getElementsByTagName() 有s！！
  • 语法:document.getElementsByTagName("tag")
    • tag为要获取的标签名称
  • 功能:返回一个对所有tag标签引用的集合
  • 返回值:类数组

通过标签名选取的元素是一个类数组对象，如果你要获取到特定的元素，那么就要像数组一样，下标从0开始算起，找到这个元素，
比如：要找第三个li，要找lis[2]。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <ul id="list1">
        <li>啦啦啦</li>
        <li>黄女士</li>
        <li>困困</li>
    </ul>
    <ol id="list2">
        <li>醒醒</li>
        <li>臭臭</li>
    </ol>
    <script>
        //获取页面中所有的li 
        var lis=document.getElementsByTagName("li");
        console.log(lis.length);//5，注意会获取整个body中的“li”
        //获取id为list1下的所有的1i 
        var lis2 = document.getElementById("list1").getElementsByTagName("li");
        console.log(lis2.length);//3
        // 找第三个li
        var li3=lis[2];
        console.log(li3);//困困
    </script>
</body>

注意：前面是document就会获取整个body中的“tag”，如果想要获取指定id下的“tag”可以和上面的语法叠加使用。

1
2
document.getElementsByTagName("li");//获取整个body中的“li”
document.getElementById("list1").getElementsByTagName("li");//获取id为"list1"这个对象中的“li”

getElementsByClassName()

  • getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
  • 返回值：类数组
  • 语法：element.getElementsByClassName(classname)
    • classname：（String）必须。你需要获取的元素类名。多个类名使用空格分隔，如 “test demo”。
  • 例子

querySelectorAll()

  • querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素组成的集合。
  • 返回值：类数组
  • 语法：elementList = document.querySelectorAll(selectors);
    • elementList 是一个静态的 NodeList 类型的对象。
    • selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。
  • 例子

innerHTML 标签之间的文本和html内容

innerHTML可用于获取/设置/增加标签之间的文本和html内容

  • 语法：ele.innerHTML
  • 功能：返回ele元素（DOM元素）开始和结束标签（tag）之间的文本和HTML内容 （倾斜标签<i>与粗体标签<b>都是HTML内容）
  • 语法：ele.innerHTML="html"
  • 功能：设置ele元素（DOM元素）开始和结束标签之间的HTML内容为html
  • 扩展：想要增加 DOM元素 开始和结束标签之间的HTML内容可使用ele.innerHTML+="增加的HTML内容"即ele.innerHTML=ele.innerHTML+"增加的HTML内容"
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <body>
        <ul id="list1">
            <li style="color:blueviolet;font-size:18px">啦啦啦</li>
            <li><i>黄女士</i></li>
            <li><b>困困</b></li>
            <li>醒醒</li>
        </ul>
        <script>
            //获取id为list1下的所有的1i,得到的是数组
            var lis = document.getElementById("list1").getElementsByTagName("li");
            for (var i = 0, len = lis.length; i < len; i++) {
                console.log(lis[i]);//可以发现每个li都被打印,<li><i>黄女士</i></li>...
                console.log(lis[i].innerHTML);//打印每一条li内的文本内容,<i>黄女士</i>...
                lis[i].innerHTML+="程序";//页面显示会变成：啦啦啦程序...每一条li都加上了“程序”
            }
        </script>
    </body>

用innerHTML插入带有标签的html内容

我们希望在js中插入连同div标签和style样式的html内容：

1
2
3
<div style="background: red;" >
        lalal
    </div>

在innerHTML中要注意将后面的代码用单引号括起来，且去掉html代码中的tab和空格！

1
2
3
4
5
6
7
8
9
<body>
    <!-- <div style="background: red;" >
        lalal
    </div> -->
    <div id="la"></div>
    <script>
        document.getElementById("la").innerHTML = '<div style="background: red;">lalal</div>';
    </script>
</body>

当然我们的代码可读性也是非常重要的，所以我们可以使用\帮助我们进行换行，注意：我们在需要换行的位置加上\即可。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <!-- <div style="background: red;" >
        lalal
    </div> -->
    <div id="la"></div>
    <script>
        document.getElementById("la").innerHTML = '\
        <div style="background: red;" >\
            lalal\
        </div>';
    </script>
</body>

className

  • className 获取和设置（替换） ele元素的class属性
  • 注意：有=就是设置，没有就是获取。

返回class属性名

  • 语法：ele.className
  • 功能：返回ele元素（DOM元素）的class属性
  • 如果元素有2个以上的class属性值，那么获取这个元素的className属性时，会将它的class属性值都打印出来（实际操作没发现会）

给元素添加类

  • 语法：ele.className="cls"
  • 功能：设置ele元素（DOM元素）的class属性为cls
  • 注意：ele.className是重新设置类，替换元素本身的class
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <head>
        <style>
            .on{
                border-bottom: 1px solid #0f0;
            }
            .current {
                background: #ccc;
                color: #f00;
            }
        </style>
    </head>
    <body>
        <ul id="list1">
            <li style="color:blueviolet;font-size:18px">啦啦啦</li>
            <!-- 一开始“黄女士”的标签是on的样式，但lis[1].className="current";会替换掉on的样式 -->
            <li class="on"><i>黄女士</i></li>
            <li><b>困困</b></li>
            <li>醒醒</li>
        </ul>
        <script>
            //获取id为list1下的所有的1i,得到的是数组
            var lis = document.getElementById("list1").getElementsByTagName("li");
            for (var i = 0, len = lis.length; i < len; i++) {
                lis[1].className="current";
            }
            console.log(lis[1].className);//current

        </script>
    </body>

DOM节点的property和attribute

  • property和attribute都是“属性”的意思，但修改property只影响页面效果，并不修改HTML/DOM结构。而修改attribute是同时修改页面效果和HTML/DOM结构的。
  • property是对DOM元素的JS对象的属性进行修改，不会修改HTML结构。
  • attribute是直接对DOM元素的属性进行修改，会改变HTML结构。
  • 建议使用property，以减少不必要的DOM重新渲染。
  • property和attribute之间互不影响。

property

  • 经过浏览器解析后，每个元素会有自己的property（特性）【可以理解为一个JS对象】。
  • 通过获取DOM元素的property（属性）可以获取/修改DOM元素的样式属性。
  • property是对DOM元素的JS对象的属性进行修改，不会修改HTML结构。
  • nodeName：DOM元素的标签名（比如p、a、div）
  • nodeType：DOM元素的类型（一般是1）
    DOM节点的property

动态设置元素样式

  • 语法：ele.style.styleName=styleValue
  • 功能：设置ele元素（DOM对象）的CSS样式
  • 说明：
  1. ele为要设置样式的DOM对象
    注意：必须是DOM对象 ，而getElementsByTagName取出的是“数组”，数组需要遍历才能动态设置CSS样式
  2. styleName为要设置的样式名称
    注意：不能使用”-”连字符形式 font-size，使用驼峰命名形式 fontSize
  3. styleValue为设置的样式值
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <body>
        <div class="box" id="box">
            元素1
        </div>
        <ul id="list1">
            <li style="color:blueviolet;font-size:18px">啦啦啦</li>
            <li>黄女士</li>
            <li>困困</li>
        </ul>
        <script>
            //设置id为box的这个元素的文字颜色，属性是减号连接的复合形式时
            //必需要转换为驼峰形式
            var box = document.getElementById("box");
            box.style.color="#f00";
            box.style.fontWeight="bold";
            //获取id为list1下的所有的1i,得到的是数组，需要遍历才能动态设置CSS样式
            var lis = document.getElementById("list1").getElementsByTagName("li");
            for (var i = 0, len = lis.length; i < len; i++) {
                // console.log(lis[i]);//可以发现每个li都被打印
                lis[i].style.color = "#00f";//li全部变蓝色
                // 设置不同背景色
                if (i == 0) {
                    lis[i].style.backgroundColor = "#ccc";
                } else if (i == 1) {
                    lis[i].style.backgroundColor = "#666";
                } else if (i == 2) {
                    lis[i].style.backgroundColor = "#999";
                } else {
                    lis[i].style.backgroundColor = "#333";
                }
            }
        </script>
    </body>

attribute

  • 通过**getAttribute()和setAttribute()可获取、修改**html/DOM的结构。
  • attribute是直接对DOM元素的属性进行修改，会改变HTML结构。
    例子
    效果

getAttribute()获取属性

  • 语法：ele.getAttribute（"attribute"）
  • 功能：获取ele元素（DOM元素）的attribute属性
  • 说明：
    1. ele是要操作的dom对象
    2. attribute是要获取的html属性（如：id、tpye）
  • 注意：
    1. 对于class以外的标准属性都可以直接通过p.id/p.align这种形式来获得属性名。
    2. 而class名字则需要通过p.className而不是p.class
    3. data-type这种自定义的属性则需通过p.getAttribute(“自定义属性类型”)来获取属性名
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <body>
              <p id="text" class="text" align="center" data-type="title">文本</p>
              <script>
              var p=document.getElementById("text");
              // 对于class以外的标准属性都可以直接通过p.id/p.align这种形式来获得属性名
              console.log(p.id);//text
              console.log(p.align);//center
              // 而class名字则需要通过p.className而不是p.class
              console.log(p.className);//text
              console.log(p.getAttribute("class"));//text，等价的
              // data-type这种自定义的属性则需通过p.getAttribute("自定义属性类型")来获取属性名
              console.log(p.getAttribute("data-type"));//title
              </script>
      </body>

setAttribute()设置/增加属性

  • 语法:ele.setAttribute("attribute",value)
    1. setAttribute方法必须要有两个参数
    2. 如果value是字符串，需加引号
    3. setAttribute（）有兼容性问题
  • 功能:在ele元素（DOM元素）上设置属性
  • 说明:
    1. ele是要操作的dom对象
    1. attribute为要设置的属性名称
    1. value为设置的attribute属性的值
      1
      2
      3
      4
      5
      6
      7
      8
      <body>
              <p id="hello" class="text" align="center" data-type="title">文本</p>
              <script>
              var p=document.getElementById("hello");
              // 给p增加一个isRead的属性
              p.setAttribute("isRead","false");
              </script>
      </body>

removeAttribute()删除属性

  • 语法:ele.removeAttribute("attribute")
  • 功能:删除ele上的attribute属性
  • 说明:
    1. ele是要操作的dom对象
    1. attribute是要删除的属性名称
      1
      2
      3
      4
      5
      6
      7
      8
      <body>
              <p id="hello" class="text" align="center" data-type="title">文本</p>
              <script>
              var p=document.getElementById("hello");
              // 删除p的align属性
              p.removeAttribute("align");//删除后文本靠左对齐
              </script>
      </body>

addEventListener() 添加事件句柄

  • addEventListener() 方法用于向指定元素添加事件句柄。
  • 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
  • 语法：element.addEventListener(event, function, useCapture)
  • 注意：当给window对象绑定事件时，一定要注意用完后移除该绑定事件！
  • 事件绑定函数可接受的第一个参数是事件对象。（**事件对象.target就是事件绑定函数对应的事件触发的DOM元素**）
    • 事件对象的preventDefault()可取消事件的默认动作，比如：如果 type 属性是 “submit”，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。
参数 描述
event 必须。字符串，指定事件名。
注意: 不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick”。
提示： 所有 HTML DOM 事件，可以查看完整的 HTML DOM Event 对象参考手册
function 必须。指定要事件触发时执行的函数。
事件绑定函数可接受的第一个参数是事件对象。（**事件对象.target就是事件绑定函数对应的事件触发的DOM元素**）
事件对象的类型取决于特定的事件。例如， “click” 事件属于 MouseEvent(鼠标事件) 对象
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行		 
1
2
3
4
5
6
7
8
9
<button id="myBtn">点我</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() 
{
    document.getElementById("demo").innerHTML = "Hello World";
}
</script>

或者

1
2
3
4
5
6
7
8
<button id="myBtn">点我</button>
<p id="demo">
<script>
document.getElementById("myBtn").addEventListener("click", function () 
{
    document.getElementById("demo").innerHTML = "Hello World";
});
</script>

完整例子

JavaScript学习