Part1-DOM学习笔记-DOM基础操作

DOM基础

1. DOM简介

1.1什么是DOM

文档对象模型（Document Object Model,简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构、样式。

1.2DOM树

在DOM中把整个页面划分为一个由文档、元素、节点组成的树形结构。

**文档：**一个页面就是一个文档，DOM中使用document表示。

**元素：**页面中所有的标签都是元素，DOM中使用element表示。

**节点：**网页中的所有内容都是节点（标签、属性、文本、注释等）,DOM中使用node表示。

DOM把以上内容都看作是对象。

2.获取元素

2.1如何获取页面元素

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

2.1.1 根据ID获取

用getElmentById()方法可以根据ID获取页面元素，如下代码示意：

<div id="hello">你好！</div>
<script>
    let hello = document.getElementById("hello");
    console.log(hello);
</script>

控制台输出的内容如下：

注意:

• 文档执行顺序的要求，script要写在标签下面，否则获取不到元素。
• getElementById()参数为字符串形式。
• 它返回的是DOM Elment对象,即元素对象。

2.1.2 根据标签名获取

用getElmentByTagName()方法可以返回带有指定标签名的对象的集合，是以伪数组的形式存储的。如下代码示意：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    let lis = document.getElementsByTagName('li');
    console.log(lis);
</script>

控制台输出结果如下：

伪数组可以进行遍历，如下代码：

for(let i = 0;i<lis.length;i++){
    console.log(lis[i]);
}

控制台输出结果如下：

注意：

• getElmentByTagName()方法返回的数据是伪数组的形式。参数为字符串的形式

• 如果页面中只找到一个元素，返回的是长度为1的伪数组。

• 如果页面中没有要查找的元素，返回的是空伪数组。

• 如果要找到特定范围的一组标签，可以先找到他们的父元素，再找他们，如下代码示意，找出所有ol标签中的li标签元素，而不想要ul中的li标签：

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
  </ul>
  <ol>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
  </ol>
  <script>
      // 先获取ol元素，得到伪数组，由于只有一个ol元素，所以用提取第一个元素，然后再获取li元素
      let ollis = document.getElementsByTagName('ol')[0].getElementsByTagName('li')
      console.log(ollis)
  </script>
  

  上面代码中实际常用用法是先给ol给个id，用id获取ol，然后再用标签名获取li标签元素

2.1.3 通过类名获取

用getElmentByClassName()方法可以返回带有指定类名的对象的集合，是以伪数组的形式存储的。

用法与getElementsByTagName()相似，不再举例。

**注意：**getElmentByClassName()方法是H5提出来的。

2.1.4 querySelector(‘选择器’)

querySelector(‘选择器’)方法也是H5提出来的，它的参数与CSS的选择器相同，并且也可以用比较复杂的选择器。querySelector方法根据指定选择器返回第一个元素对象。

    <div class="head">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">关于</a></li>
            <li><a href="">帮助</a></li>
        </ul>
    </div>
    <div class="content">
        这是内容
    </div>
    <div class="foot">
        <ul>
            <li><a href="">联系我们</a></li>
            <li><a href="">版权声明</a></li>
            <li><a href="">使用条款</a></li>
        </ul>
    </div>
    <script>
        console.log(document.querySelector(".foot a"))
    </script>

控制台输出如下：

2.1.5 querySelectorAll(“选择器”)

querySelectorAll(‘选择器’)方法也是H5提出来的，它与querySelector用法类似，不过它返回的是指定选择器的所有的元素的集合，是以伪数组的形式存储的。如下代码：

console.log(document.querySelectorAll(".foot a"))

控制台结果如下：

2.1.6获取特殊元素

• 获取body元素：document.body返回body元素对象

• 获取html元素:document.documentElement返回html元素对象。

3 事件基础

3.1 事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。可以简单理解为触发-响应机制。

网页中每个元素都可以产生某些可以出发JavaScript的事件。

事件是由三部分组成，分别为事件源、事件类型、事件处理程序，也称为事件三要素。

**事件源：**事件被触发的对象，比如按钮触发了事件，那么事件源就是按钮。

**事件类型：**如何触发，什么事件。比如鼠标点击、还是鼠标经过、还是键盘按下等。

**事件处理程序：**通过函数赋值的形式。

如下代码是简单的一个鼠标触发事件：

    <button id="btn">点击</button>
    <script>
        // 获取事件源
        let btn = document.getElementById('btn');

        // 绑定事件类型并编写事件处理函数
        btn.onclick = function(){
            alert('你点击了按钮');
        }
    </script>

3.2执行事件的步骤

• 获取事件源

• 注册事件（绑定事件）

• 添加事件处理程序（采取函数赋值的形式）

3.3常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发