DOM基础

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>

完整例子