DOM

基础概念

DOM

概念
- DOM(文档对象模型-document object model)。JavaScript会将文档(HTML页面)看成一系列标签的集合，并提供了一系列的api来操作HTML文档，比如对标签进行增删查改操作，或者修改css。这样的的话借助JavaScript能够实现动态页面。
发展
- DOM 0级：在96年之前ie浏览器和网景浏览器为了抢夺市场，都分别实现了一套JavaScript用于操作HTML的api。因为是分别实现的，没有标准，在正式dom标准出来之前，统称它们的相关api为dom0级
- DOM 1级：98年w3c出台了第一版domapi的标准，基本ie8就使用了该标准。dom1级只能简单的操作HTML标签，比如提供document.images来获取页面上所有的<img>标签等。
- DOM 2级：目前所有浏览器都支持的版本。增强了对页面的控制，以及添加了对css的支持，以及事件的支持。ie9+
- DOM 3级：目前所有浏览器都支持的版本，将api进行模块化，更方便管理和更新。
兼容性
- DOM1级，ie8及以下
- DOM2级和3级：ie9+、现代浏览器
DOM树
- JavaScript会为了方便对HTML页面进行操作，会吧HTML页面抽象成一个具有层次的文档结构，我们称为“DOM”，因为按照层级来进行描述有点类似倒挂的树。
- 每个HTML标签都是一个节点。其中标签内部的属性和文本内容在JavaScript中也会作为一个节点存在。
```
<a href="http://www.baidu.com">百度一下</a>
```

该<a>标签在JavaScript中会作为一个节点，而<a>内部的href属性和文本百度一下也会作为一个节点存在。

DOM节点
- w3c规定了根据代码的不同作用将节点分成了12种类型，常用的只有3种：
  - 元素节点-Element Node：指的是HTML标签。即一个元素节点指的是dom树中的一个HTML标签
  - 属性节点-Attribute Node:指元素节点中的一个属性。比如<a>中的href属性就是一个属性节点。
  - 文本节点-TextNode:指的是元素节点中的文本内容。比如<a>百度一下</a> 的文本内容-百度一下
- 常用api
  - 属性
    - nodeName:节点的名称。比如<div>的nodeName是DIV
    - nodeType:指的是节点的类型,是一个数字:
      - 1:该节点是一个元素节点，即HTML标签
      - 2:该节点是一个属性节点，
      - 3:该节点是一个文本节点
        html:
        <a href="http://www.baidu.com">百度一下</a>
        JavaScript：
        var a = document.querySelector('a');
        a.nodeName ;// A
        a.nodeType: // 1

DOM基本操作

document对象

document对象是DOM的核心，基本上大多数DOM API由该对象提供。
基础api：DOM1级
- 获取body标签
- 获取HTML标签
- 获取页面上的标题
- 获取页面上的地址
- 获取页面上的所有图片
- 获取页面上的所有表单

1. 获取<body>标签
var body = document.body;
2. 获取<html>标签
var html = document.documentElement;
3. 获取页面上的标题
var title =document.title;
4. 获取页面地址
var url = document.URL;
5. 获取页面上的所有图片,即<img>
var imgs = document.images;
6. 获取页面上的所有表单
var forms = document.forms;

HTML标签api
- 获取
  - document.getElementById
  - document.getElementsByClassName
  - document.getElementsByTagName
  - document.querySelector/All
- HTML标签属性
  - setAttribute
  - getAttribute
- 添加标签
  - document.createElement()
  - appendChild
  - insertBefore
- 删除标签
  - removeChild
- 获取兄弟标签
  - previousElementSibling:上一个兄弟标签
  - nextElementSibling：下一个兄弟标签
- 获取子标签
  - firstElementChild
  - lastElementChild
  - children
- 获取父标签
  - parentElement
- css操作
  - getComputedStyle
- 标签变量名.style.css属性名=属性值
JavaScript DOM的一般使用流程
- 先获取HTML标签
- 修改或获取HTML标签的内容
- 修改HTML标签的css

获取HTML元素

通过id

var 标签变量名 = document.getElementById("标签的id属性值");

通过class

var 标签数组变量名 = document.getElementsByClassName("class属性值");
例子：
var elems = document.getElementsByClassName("btn");
获取找到的第一个标签： elems[0]
获取找到的第二个标签： elems[1]
获取找到的最后一个标签： elems[elems.length-1]

    获取的是一个数组，哪怕是没有数据，或者只有一个，也是返回的数组

通过标签名

var 标签数组变量名 = document.getElementsByTagName("标签名");
例子：获取页面所有的div
var divs = document.getElementsByTagName("div");

获取的是一个数组，哪怕是没有数据，或者只有一个，也是返回的数组

通过querySelector/querySelectorAll：通过css选择器来查找标签

querySelector：匹配第一个找到的HTML标签

var 标签变量名 = document.querySelector("标签的css选择器");
例如：获取id为box下的第一个p标签
var ps = document.querySelector("#box p");
例子：找到body下的第一个直接子标签，子标签的class为 item
var elem = document.querySelector("body > .item");

querySelectorAll：匹配找到的所有标签

var 标签变量名 = document.querySelectorAll("标签的css选择器");
例如：获取id为box下的所有p标签
var ps = document.querySelectorAll("#box p");
ps.innerHTML

获取/修改HTML元素的内容/属性

内容
- value属性 ```javascript // 1. 先获取HTML标签 var 标签变量名 = document.querySelector(‘input’); // 2. 获取HTML标签的内容标签变量名.value;

//修改标签变量名.value = 新数据;

例如：获取input里的内容 html:

js: var input = document.querySelector(‘#username’); var data = input.value;//输入框内容保存在data变量里 //修改数据为123 input.value = “123”;页面上输入框会显示123


   - innerHTML
      - 获取标签内部的HTML代码。一般针对于`<标签名></标签名>`这种模式的标签
```javascript
// 1. 先获取HTML标签
var 标签变量名 = querySelector('#box');
// 2. 获取HTML标签的内容
标签变量名.innerHTMl;
//修改
标签变量名.innerHTML = 新数据;
例如：获取div里的内容
html:
<div id="box">
 <p>这是div里的p标签</p>    
</div>
js:
var div = document.querySelector('#box');
var text = div.innerHTML;// 输出  <p>这是div里的p标签</p>    
//修改数据为123
input.innerHTML = "123";//div中只有123，p标签会被替换掉

innerText
- 获取标签内的文本内容。一般针对于<标签名></标签名>这种模式的标签 ```javascript // 1. 先获取HTML标签 var 标签变量名 = querySelector(‘#box p’); // 2. 获取HTML标签的内容标签变量名.innerText; //修改标签变量名.innerText = 新数据;

例如：获取div里的内容 html:

这是div里的p标签

js: var div = document.querySelector(‘#box’); var text = div.innerText;// 输出这是div里的p标签 //修改数据为123 input.innerText = “123”;//div中只有123，p标签会被替换掉

- innerHTML、innerText、value的区别

      1. innerHTML和innerText都是针对`<标签名></标签名>`该模式的标签，比如div、p、li、a、body、ul等
      2. innerHTML是改变的标签内部的HTML代码，而innerText改变的是标签内部的文本
      3. value针对带有value属性的标签 ，比如input
- 
属性

   - 获取

javascript 1. 先获取标签标签变量名.getAttribute(“属性名”); 例子： DOM - 图1

js: var img =document.querySelector(“#img”); var src = img.getAttribute(“src”); document.write(src);输出 img/id1.jpg - 设置javascript 标签变量名.setAttribute(“属性名”,”属性值”); 例子：修改地址为img/id2.jpg DOM - 图2

js: var img =document.querySelector(“#img”); img.setAttribute(“src”,”img/id2.jpg”);

<a name="9a423fa9"></a>
### 添加或删除HTML元素

- 
添加

   - 
概念：利用JavaScript的相关api`document.createElement()`在程序中生成一个新的HTML标签并利用`apeendChild`或`insertBefore`将新建标签放入到页面中。

   - 
流程

      1. 利用`document.createElement()`生成一个新的标签，新建的标签是存在于代码中，页面上不会显示出来
      2. 利用`appendChild`或`insertBefore`将第一步新建的标签追加到页面上，
   - 
相关api

      - `document.createElement`:新建标签

javascript var 标签变量名 = document.createElement(“标签名”); 例子：新建一个div标签 var newDiv = document.createElement(“div”);

- `appendChild`:将某个标签追加到页面中，作为其父标签的最后一个子标签。保证其父标签是页面上已存在的标签。

javascript 父标签变量名.appendChild(新标签变量名); 例子：把新建的div标签作为id为mydiv的标签的最后一个子标签放在页面上 var newDiv = document.createElement(“div”); //document.body.appendChild(newDiv);作为body的子标签 var father = document.querySelector(‘#mydiv’); father.appendChild(newDiv); - `insertBefore`:将某个标签追加到页面上，并作为其父标签的子标签并放在指定兄弟标签之前javascript 父标签变量名.insertBefore(新标签变量名,兄弟标签变量名); 例子：新建p标签，并把新标签放入id为box的div标签中，作为其第一个子标签

这是第一个子标签

js: var newP = document.createElement(“p”); newP.innerText = “我才是第一个p标签”; var father = document.querySelector(‘#box’); var brother = document.querySelector(‘#box p’); father.insertBefore(newP,brother);

- 
删除

   - 
流程

      - 获取待删除的标签以及其父标签
      - 父标签调用`removeChild`来删除子标签
   - 
相关api

      - `removeChild()`

javascript 父标签变量名.removeChild(待删除的子标签); 例子：删除div里的p标签

这是div里的p标签

js: var father = document.querySelector(‘#box’); var p = document.querySelector(‘#box p’); father.removeChild(p);

- 
removeChild每次只能删除一个标签

      - 
完成批量删除操作

         - 获取所有待删除的标签，
         - 对这些标签进行for循环遍历，父标签依次调用`removeChild`进行删除

<a name="ecc07ca4"></a>
### 获取兄弟标签

- 概念：通过以下属性来获取同级别的其他兄弟标签
- `previousElementSibling`：
- `nextElementSibling`

javascript 标签变量名.nextElementSibling;//下一个兄弟标签标签变量名.previousElementSibling;//上一个兄弟标签例子： html:

年龄:

js:通过button来获取input标签 fuction sub(btn){ 获取button的下一个兄弟标签 var input = btn.nextElementSibling; } fuction add(btn){ 获取button的上一个兄弟标签 var input = btn.previousElementSibling; }

<a name="f493a0e4"></a>
### 获取父标签

- 概念:获取父标签
- `parentElement`

javascript 标签变量名.parentElement; 例子： html:

年龄:

js:通过button来获取其父标签 fuction sub(btn){ 获取button的父标签 var input = btn.parentElement; }

<a name="ce8317eb"></a>
### 获取子标签

- 概念：通过其父标签来获取子标签
- `firstElementChild`:获取第一个子标签
- `lastElementChild`:获取最后一个子标签
- `children`:获取所有的直接子标签。返回的是一个数组

javascript 标签变量名.firstElementChild; 标签变量名.lastElementChild; 标签变量名.children; 例子： html:

js: // 通过div来获取其子标签 var div = document.querySelector(‘#box’); var first = div.firstElementChild; var last = div.lastElementChild; console.log(first);// console.log(last);// console.log(div.children); //[button,input,button]

<a name="e36d02e7"></a>
### 修改css

- 获取

   - `getComputedStyle`:JavaScript内置函数，能够获取某个标签的所有最终使用样式。该函数会返回一个对象，需要我们定义变量接收后进行使用。该对象中包含了该标签的所有样式，可以通过`对象变量名.css属性名`来获取某个css属性

javascript javascript var 变量名 = getComputedStyle(标签变量名,null); 例子：获取div的width和height html:

JavaScript： var div = document.querySelector(‘#box’); //获取所有的样式 var style = getComputedStyle(div,null); //获取width和height console.log(style.width,style.height);//200px 200px


- 设置
   - `标签变量名.style.css属性名=css属性值`
```javascript
标签变量名.style.css属性名=css属性值;
例子：改变div的背景颜色为蓝色
<div></div>
JavaScript：
var div = document.querySelector('div');
div.style.backgroundColor = "blue";

JavaScript会将设置的css样式作为嵌入样式放在标签的style属性中，这样可以保证css样式优先级最高

点击事件

当用户点击某个按钮的时候，执行指定的js代码。

1 在标签上书写onclick = "js代码"; 所有标签都可以添加
<div onclick = 'alert(123)'>点击我</div>
2. 在js中书写代码
标签变量名.onclidk = function(){
    当该标签被点击时要执行的代码
}
例如：
<button onclick="demo()">登录</button>
<button id="reg-btn">注册</button>
JavaScript：
//1 标签中设置onclick属性
function demo(){
   console.log('被点击了');
}
// 2获取HTML标签，并设置点击
var button = document.querySelector('#reg-btn');
button.onclick = function(){
    console.log('button被点击了');
}

如何在点击的时候获取被点击的标签:两种方式

1.在onclick中添加this作为实际参数，在函数中用形式参数来接收 
<div onclick="函数名(this);"></div>
js:
function 函数名(elem){
    //elem就是被点击的标签本身
    elem.innerText = "被点击了";
}
2. 在js中指定onclick时，直接在function中用this来指代被点击的标签本身
<button id="demo">登录</button>
js:
var btn = document.querySelector('button');
btn.onclick = function(){
    //this指的就是标被点击的标签本身，即<button id="demo">登录</button>
    this.innerText = "被点击了";//直接使用
}

eval

概念：JavaScript内置函数把某个字符串作为JavaScript代码执行并返回执行的结果
语法

eval('var a=10;alert(a)');//弹框输出10
var num = eval("2+2");
document.write(num);//4

substr\substring

概念：都是针对字符串的内置api。用于获取字符串中的一部分字符,即获取子字符串
语法

字符串.substr(子字符串的开始下标，子字符串的字符数量);
字符串.substring(子字符串的开始下标，子字符串的结束下标);
//获取hello
var str = "hello woniuxy";
var newStr = str.substr(0,5);
var newStr =str.substring(0,5);
document.write(newStr);//hello

substring不包含结束下标
substr/substring，如果直接到末尾，第二个实际参数可以省略不写

扩展

控制视音频

play():JavaScript提供的api，用于控制视音频的播放
pause()：JavaScript提供的api，用于控制视音频的暂停

html:
<audio src="圣诞.wav" id="music" controls></audio>
javaScirpt:
var music = document.querySelector("#music");
//播放
music.play();
//暂停
music.pause();

video标签使用方式跟音频是一样的