JavaScript DOM编程基础（DOM属性&事件[叮：事件代理]，Ajax，BOM，form表单）

文档树 DOM：Document Object Model

即：用对象的形式表示HTML、CSS。

DOM包含：

• DOM Core
• DOM HTML
• DOM Style
• DOM Event

1.节点遍历：ヾ(o◕∀◕)ﾉ

node.parentNode
    .childNodes //得到node的全部子节点，包括各种类型
    .firstChild
    .lastChild
    .previousSibling
    .nextSibling //下一个兄弟节点

2.元素类型节点遍历：

p.parentElement  //父元素节点
 .children //返回指定节点的所有element子节点的活HTMLCollection，可以children[0].nodeName获取
 .firstElementChild
 .lastElementChild
 .previousElementSibling
 .nextElementSibling

节点操作

1.获取节点

getElementById

//返回live（实时变化）的动态集合
getElementsByClassName("classA")
//获取同时有两个类名的元素节点
getElementsByClassName("classA classB") 

//返回live（实时变化）的动态集合
getElementsByTagName()

//特别注意：querySelectorAll是non-live(非实时变化)的。 ヾ(o◕∀◕)ﾉ
querySelector("#users") 获取第一个符合条件的元素
querySelector("input[type='text']") 可以根据属性进行选择，很方便
querySelectorAll(".user") 获取所有匹配的元素
querySelectorAll("#users .user")

注意：以上选择器（getElementById除外），除了可以在整个文档中寻找，比如： document.getElementsByClassName('className')，还可以在某个节点下寻找，比如：element.getElementsByClassName('className') 。

2.增加节点

创建节点 ヾ(o◕∀◕)ﾉ

//创建指定标签名称的节点
element = document.createElement(tagName)
var li = document.createElement("li");
var a = document.createElement("a");

设置节点内容

//获取节点及其后代节点的文本内容或为节点添加内容
element.textContent
element.innerText
element.textContent = "newValue";
element.innerText = "newValue";

插入节点到文档中 ヾ(o◕∀◕)ﾉ

//插入节点
//appendChild会添加到parentElement结束标签之前，也就是变成parentElement元素的最后一个子元素
parentElement.appendChild(childElement); 
//insertBefore会添加newElement到parentElement下referenceElement元素前面
parentElement.insertBefore(newElement, referenceElement)

3.移动&克隆节点 ヾ(o◕∀◕)ﾉ

如果想把一个节点从原来的位置移动到指定位置。那么只需要：

const myElementClone = document.getElementById("myElement");
document.getElementById("new-position").appendChild(myElementClone);

但如果不想移动原来节点的位置，而是想克隆一个新的节点出来，那么需要用到cloneNode(true)

const myElementClone = document.getElementById("myElement").cloneNode(true);
document.getElementById("new-position").appendChild(myElementClone);

4.删除节点 ヾ(o◕∀◕)ﾉ

parentElement.removeChild(child);
通常不用专门获取parentElement，直接写child.parentNode即可

5.可同时用于添加节点，设置节点内容，插入节点，删除节点

 //获取节点内部的所有HTML结构代码，或为节点添加内部的html代码
element.innerHTML
element.innerHTML = "hahaha"
//可能有内存泄漏和安全问题，因此仅建议用于新建节点，并尽量不用于用户填的内容

属性操作

1.HTML attribute -> DOM property

input元素

• id - id
• type - type
• class - className

label元素

• for - htmlFor

2.property accessor 属性访问器

两种访问方式：

1. input.className;
2. input["id"] = 'cute'

属性访问器的通用性和拓展性不好。

3.getAttribute/setAttribute

1. element.getAttribute(attritubeName)

eg: input.getAttribute("class");

1. element.setAttribute(name, value)

eg: input.setAttribute("id", "unique") //会将id设置为unique
特例：disabled属性
//以下三种都会将disabled设置为生效
input.setAttribute("disabled", true)
input.setAttribute("disabled", "")
input.setAttribute("disabled", false)
因为setAttribute只是字符串的操作，所以想要移除disabled属性只能input.removeAttribute("disabled");

缺点：仅仅是字符串的操作。
优点：通用性好，直接把HTML属性名传进去就行了。

4.自定义属性: dataset

HTMLElement.dataset：dataset是HTML元素上的一个属性，是data-*属性的一个集合，主要的用途是在元素上保存数据。一般用来做自定义的数据属性。

Darcy

div.dataset.

• id： 123456
• accountName： darcy

//在JS中可以这样获取：
var data = div.dataset;
//然后这样用
var dataId = data.id;
document.getElementById("info").innerText = data.accountName;

5.修改class列表: classList

element.classList.add("classA"); // 为元素添加一个class
element.classList.remove("classA"); // 删除元素上名为classA的类
element.classList.toggle("classA");

样式操作（通过JS动态修改样式）

style, style.cssText, class, styleSheet, window.getComputedStyle

1. element.style.cssProperty

Darcy

var div = document.getElementById("users");
console.log(div.style.color); // red

2.更新样式

element.style.cssProperty

element.style.borderColor = "red";
element.style.color = "red";

缺点：更新每一个属性都需要单独的一条语句。

改进：用element.style.cssText = "border-colot: red; color: red;"

缺点：样式混在逻辑中。

再次改进：更新class（推荐方法）

.invalid {
  border-color: red;
  color: red;
}

element.className += " invalid"

存在的问题：一次更新很多元素的样式时会很麻烦。

改进（一次更新很多元素的样式）：更换样式表

//html


//js
document.getElementById("skin").href = "skin.summer.css";

3.获取样式

element.style.cssProperty

只能获取到写在HTML元素上的样式，若写在