DOM学习1

1. 什么是DOM

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

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

        DOM 树

  

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

        2. 元素：页面中所以的标签都是元素，DOM中使用element表示

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

         DOM把以上内容都看做对象

2. 获取元素

         DOM 在实际开发中主要是用来操作元素，获取页面中的元素可以使用以下几种方式

        2.1 根据 ID获取

<div id="div1">我是一个div标签</div>
<script>
  // 通过id 获取元素
  var div = document.getElementById('div1');
  console.log(div);
</script>

        2.2 根据标签名获取

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
// 返回一个`HTMLCollection`(伪数组)，包含匹配指定标签名的所有元素
  console.log(p);
</script>

        2.3 根据类名获取

<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');
// 返回的是一个伪数组
  console.log(div);
</script>

        注意：通过标签名和类名获取元素，返回的都是一个伪数组

        2.4 document.querySelector()

        返回指定选择器的第一个元素对象

<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<div class="div3">我是一个div</div>
<script>
// 注意 引号里面要加选择器的标识符 .box3 #div1
  document.querySelector("#div1").innerHTML = "Hello World!";
  document.querySelector(".div3").innerHTML = "Hello World!";
</script>

        2.5 document.querySelectorAll()

        返回指定选择器的使用元素对象集合

<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  var d = document.querySelectorAll(".div1");
  console.log(d));
</script>

        2.6 其他元素获取

// html元素
console.log(document.documentElement);
// body元素
console.log(document.body);
// img元素
console.log(document.images)
// form元素
console.log(document.forms);
// a标签 带有href属性的
console.log(document.links);
// 获取域名 --只能通过服务器打开
console.log(document.domain);
// 获取文档头信息
console.log(document.doctype);
// 获取文档标题
console.log(document.title);
// 获取URL
console.log(document.URL);
// 获取页面来源地址--只能通过服务器打开
console.log(document.referrer)

3.事件机制

        3.1 事件概述

        JavaScript 使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

        简单理解： 触发——响应机制

        网页中的每一个元素都可以产生某些可以触发JavaScript的事件，例如：我们可以在用户点击某个按钮是产生一个事件，然后去执行某些操作。

        3.2 事件是由三部分组成

        事件源 事件类型 事件处理程序 我们也称为事件三要素

                1.事件源：事件被触发的对象 -->按钮对象

                2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…

                3.事件处理程序：通过一个函数赋值的方式

        3.3 执行事件的步骤

                1. 获取事件源

                2. 注册事件（绑定事件）

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

   <button id="btn">hello</button>
    <script>
        // 1. 事件源 事件被触发的对象
        var btn = document.getElementById('btn');
        // 2. 事件类型  如何触发 什么事件  比如鼠标点击 / 鼠标经过
        // 3. 事件处理程序 通过函数赋值的方式
        btn.onclick = function () {
            alert('world');
        }
    </script>

 4. 操作元素     

      JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性。

        4.1 改变元素内容

        - element.innerText

        从起始位置到终点位置的内容，但它会去除html标签，同时空格和换行也会去掉

<div id="div1">我是一个div</div>
<div id="div2"></div>
<script>
   var d1 = document.getElementById('div1');
   // 获取
   console.log(d1.innerText);
   // 设置
   d1.innerText = '我是新的内容';
   // innerText会去除html标签，同时空格和换行也会去掉
   d2.innerText = '<p>我是一个p标签</p>';
</script>

        - element.HTML

        起始位置到终点位置的全部内容，包括html标签，同时保留空格和换行

<div id="div1">我是一个div</div>
<div id="div2"></div>
<script>
  var d1 = document.getElementById('div1');
  // 获取
  console.log(d1.innerHTML);
  // 设置
  d1.innerHTML = '我是新的内容';
  // innerText会去除html标签，同时空格和换行也会去掉
  d2.innerHTML = '<p>我是一个p标签</p>';
</script>

      4.2 修改元素的属性

        - element.attribute = value

        修改已经存在的属性的值

<div id="div1">123</div>
<script>
  var d1 = document.getElementById('div1');
  // 直接将已经存在的属性进行修改
  d1.id = 'div2';
</script>

        - element.getAttribute()

        返回元素节点的指定属性值。

<div id="div1">我是一个div</div>
<script>
  var div = document.getElementById('div1');
  console.log(div.getAttribute('id')); // div1
</script>

       - element.setAttribute(attribute, value)

        把指定属性设置或更改为指定值。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 设置div1的class为box
  d1.setAttribute('class', 'box');
</script>

       - element.style.property

        设置或返回元素的 style 属性。

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取div1的style样式
  console.log(d1.style);
  // 设置div1的style
  d1.style.backgroundColor = 'red';
</script>