基础概念

DOM

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

<a href="http://www.baidu.com">百度</a>

该<a>标签在js中会作为一个节点，而<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>
js
var a = document.querySelector('a');
a.nodeName; //A
a.nodeType; //1

DOM基本操作

document对象

document对象是DOM的核心，基本上大多数DOM api由该对象提供。
基础api：DOM 1级

获取body标签
var body = document.body;
获取HTML标签
var html = document.documentElement;
获取页面上的标题
var title = document.title;
获取页面上的地址
var url = document.URL;
获取页面上的所有图片
var imgs = document.images;
获取页面上的所有表单
var form = document.forms;

HTML标签api

获取
document.getElementById
document.geyElementsByClassName
document.getElementsByTagName
document.querySelector/All

HTML标签属性
setAttribute
getAttribute

添加标签
document.createElement()
appendChild
insertBefore

删除标签
removeChild

获取兄弟标签
previousElementSibling
nextElementSibling


获取子标签
firstElementChild
lastElementChild
children

获取父标签
parentElement

css操作
获取
getComputedStyle:JavaScript内置函数，能够获取某个标签的所有最终使用样式
var 变量名 = getComputedStyle(标签变量名，null);

设置
标签变量名.style.css属性名=css属性值

JavaScript DOM的一般使用流程
先获取HTML标签
修改或获取HTML标签的内容
修改HTML标签的css

获取HTML标签

用javascript的方式获取页面上的标签
通过id
var input = document.getElementById('标签的id属性值');
获取的是一个数组，哪怕是没有数据，或者只有一个，也返回数组

通过class
var elems = document.getElementsByClassName('class属性值');

通过标签名
var divs = document.getElementsByTagName("标签名");
获取的是一个数组，哪怕是没有数据，或者只有一个，也返回数组

通过querySelector/querySelectorAll（通过css选择器来查找标签）找到#box下的第二个p标签  
querySelector：匹配第一个HTML标签
var 标签变量名 = document.querySelector("标签的css选择器");
var p = document.querySelector("#box p:nth-child(2)");
querySelectorAll：匹配找到的所有标签
var 标签变量名 = document.querySelectorAll("标签的css选择器");
var ps = document.querySelectAll("#box p");
返回的是一个数组，通过下标获取具体的一个标签

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

内容
value属性

//先获取html标签
var 标签变量名 = querySelector('input');
//获取html标签的内容
标签变量名.value;
//修改
标签变量名.value = 新数据;

innerHTML

获取标签内部的HTML代码。一般针对于<标签名></标签名>这种模式的标签
var 标签变量名 = querySelector('#box');
标签变量名.innerHTML;

标签变量名.innerHTML = 新数据;

innerText

获取标签的内容。一般针对于<标签名></标签名>这种模式的标签
var 标签变量名 = querySelector('#box p');
标签变量名.innerText;

标签变量名.innerText = 新数据;

innerHTML、innerText、value的区别
（1）innerHTML和innerText都是针对<标签名></标签名>这种模式的标签，比如div、p、li、a、body、ul等。
（2）innetHTML是改变的标签内部的HTML代码，而innerText改变的是标签内部的文本。
（3）value针对带有value属性的标签，比如input
属性

获取
先获取标签
标签变量名.getAttribute("属性名");
例子
<img src="img/id1.jpg" id="img">
js:
var img = document.1uerySelector("#img");
var src = img.getAttribute("src");
document.write(src);//输出img/id1.jpg

设置
标签变量名.setArribute("属性名"，"属性值");
例子
修改地址为img/id2.jpg
<img src="img/id1.jpg" id="img">
js:
var img = document.querySelector("#img");
img.setAttribute("src","img/id2.jpg");

添加或删除HTML元素

添加
概念：利用javascript的相关api document.createElement()在程序中生成一个新的HTML标签并利用appendChild或insertBefore将新建标签放入到页面中。
流程
（1）利用document.createElement()生成一个新的标签，新建的标签是存在于代码中，页面上不会显示出来
（2）利用appendChild或insertBefore将第一步新建的标签追加到页面上。
相关api
document.createElement：新建标签

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

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

父标签变量名.appendChild(标签变量名);
例子：
把新建的div标签作为id为mydiv的最后一个子标签放在页面上
var newDiv = document.createElement("div");
document.body.appendChild(newDiv); //作为body的子标签
var father = document.querySelector('#mydiv');
father.appendChild(newDiv);

insertBefore：将某个标签追加到页面上，并作为其父标签的子标签并放在指定兄弟标签之前

父标签变量名.iNSERTbEFORE(新标签变量名，兄弟标签变量名);
例子：新建p标签，并把新标签放入id为box的div标签中，作为第一个子标签
<div id="box">
    <p>starnight</p>
</div>
js:
var newP = document.createElement("p");
newP.innerText = "starnight";
var father = document.querySelector('#box');
var brother = document.querySelector('#box p');
father.insertBefore(newP,brother);

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

removeChild()
父标签变量名》removeChild（待删除的子标签）;
例子
删除div里的p标签
<div id="box">
    <p>starnight</p>
</div>
js:
var father = document.querySelector('#box');
var p = document.querySelector('#box p');
father.removeChild(p);

/*removeChild每次只能删除一个标签
完成批量删除操作
    获取所有待删除的标签，
    对这些标签进行for循环遍历，父标签依次调用removeChild进行删除

获取兄弟标签

标签变量名.nextElementSibling;//下一个兄弟标签
标签变量名.previousElementSibling;//上一个兄弟标签
例子：
html:
<div>
        <button onclick="sub()">-</button>
        年龄<input type="text" value="1" id="demo2"/>
        <button onclick="add()">+</button>
</div>
js:通过button来获取input标签
function sub(btn){
    获取button的下一个兄弟标签
    var input = btn.nextElementSibling;
    }
function add(btn){
    获取button的上一个兄弟标签
    var input = btn.previousElementSibling;
    }

获取父标签

获取父标签
parentElement
标签变量名.parentElement;
例子:
html:
<div>
        <button onclick="sub(this)">-</button>
        年龄<input type="text" value="1" id="demo2"/>
        <button onclick="add(this)">+</button>
</div>
js:通过button来获取其父标签
function sub(btn){
    获取button的父标签
    var input = btn.parentElement;
    }

获取子标签

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

标签变量名.firstElementChild;
标签变量名.lastElementChild;
标签变量名.children;
例子
html:
<div id="box">
        <button>-</button>
        <input type="text">
        <button>+</button>
</div>
js:
//通过div来获取其子标签
var div = document.querySelector('#box');
var first = div.firstElementChild;
var last = div.lastElementChild;
console.log(first); //<button>-<button>
console.log(last); //<button>+<button>
console.log(div.children); // [button,input,button]

修改css

获取
例子：获取div的width和height
html
<style>
div {width:200px;height:200px;}
</style>
<div id="box"> </div>
js
var div = document.querySelector('#box');
//获取所有的样式
var style = getComputedStyle(div,null);
//获取width和height
console.log(style.width,style.height);
该函数会返回一个对象，需要我们定义变量接受后进行使用。该对象中包含了该标签的所有样式，可以通过对象变量名.css属性名来获取某个css属性。

设置
例子：改变div的背景颜色为蓝色
<div></div>
js：
var div = document.querySelectior('div');
div.style.backgroundColor = "blue";

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

点击事件

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

1.在标签上书写onclick = "js代码";
<div onclick = 'alert(123)'>点击我</div>

2.在js中书写代码
标签变量名.onclick = function() {
      当该标签被点击时要执行的代码
      }

//例子
<button onclick="demo()">登录</button>
<button id="reg-btn">注册</button>
<script>
    function demo(){
        console。log（'被点击了'）;
        }
//获取html标签，并设置点击
var button = documnet.querySelector('#reg-btn');
button.onclick = function(){
    console.log('button被点击了');
    }

如何在点击的时候获取被点击的标签

<div onclick = "函数名(this);"></div>
js:
function 函数名(elem){
     elem就是被点击的标签本身
     }

eval函数

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

语法
var num = eval("2+2");
eval('var a=10;alert(a)');//弹框输出10
例子
eval("x=10;y=20;document.write(x*y)")  //200

substr\substring

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

字符串.substr(子字符串的开始下标，子字符串的字符数量)
字符串.substring(子字符串的开始下标，子字符串的结束下标);

var str = "hellow starnight";
var newArr = str.substr(0,5);
var newArr = str.substring(0,5);
documnet.write(newArr); //hello

substring不包含结束下标。