HTML DOM文档对象模型

一.节点
DOM中所有的内容都是节点
1.每个html元素为元素节点
2.每个html元素的属性为属性节点
3.html里的文本为文本节点

二.获得元素节点对象
1.document.getElementById(“id”);
通过id（唯一）来找到html元素即获取元素节点 返回元素对象
2.document.getElementByName(“name”);
通过name来找到元素节点，由于name不唯一所以返回元素对象数组，数组里每个值为对应的元素对象
3.document.getElementByTagName(“p”);
通过标签来找到元素节点，同理由于标签不唯一所以返回元素对象数组
4.document.getElementByClassName(“classname”);
通过class的值找到元素节点，同理返回元素对象数组

三.修改元素节点内的文本节点
1.innnerText("");
例子：document.getElementById(“id”).innerText(“修改后的内容”);
2.innerHTML("");
例子：document.getElementById(“id”).innerHTML(“

修改后的内容

”);
区别：innerText只能写纯文本，而innerHTML可以包含html标签，功能更强大

四.获得或修改属性节点的值
1.修改属性节点的值
setAttribute(“name”,“value”); 第一个name为属性节点的名称，第二个value为修改后的内容
例子：document.getElementById(“id”).setAttribute(“href”,“https”//www.baidu.com");
2.获得属性节点的值
（1）getAttribute(“name”); name为属性节点的名称
例子：document.getElementById(“id”).getAttribute(“title”);
（2）获得元素节点后可以直接获取属性节点
例子：获取超链接的地址
document.getElementByTagName(“a”).href;

五.改变css样式
document.getElementById(“id”).style.property=“新样式”
例子：document.getElementById(“id”).style.backgroundcolor=“red”;
例子2：设置隐藏和可见
document.getElementById(“id”).style.visibility=“hidden”/“visiable”;

六.动态创建节点
1.动态创建元素节点
document.createElement(“标签名”);
例子1：创建p标签
document.createElement(“p”)
例子2：创建按钮
var btn = document.createElement(“input”);
btn.type=“button”;
btn.value=“按钮”;
btn.onclick = function(){
alert(“这是一个按钮”);
}

2.动态创建文本节点
document.createTextNode(“文本值”);
例子：document.createTextNode(document.getElementByTagName(“input”).value);

3.为元素节点添加子节点
（1）父元素.appendChild(子元素); 只能添加到父元素的最后一个子元素的后面
括号里没有双引号
例子： var td = document.createElement(“td”);
var tr = document.getElementById(“tr”);
tr.appendChild(td);

（2）父元素.insertBefore(任意子节点,要插入的子节点); 会添加到指定的子节点的前面
同样括号里两个值没有双引号
例子： var td2 = document.getElementById(“td2”); //找到指定的子节点
var td3 = document.createElement(“td”); //创建新的节点
td2.parentElement.insertBefore(td2,); //将新节点添加到指定子节点前面

4.删除节点 父元素.removeChild(要删除的子节点);
var tbody = document.getElementById(“body”); //获取父元素
var tr = document.getElementById(“tr”); //获取要删除的子节点
tbody.removeChild(tr)

七.正则表达式 又称为规则表达式
var teg = /正则表达式/;
var txt = document.getElementById(“text”).value; //获取文本框的值
teg.text(txt); //判断是否符合正则表达式，符合返回true，否则返回false

八.杂项
1.dom中比较常用的属性
（1）nodeName
获取节点的名称 元素节点和属性节点为其本身，文本节点为#text无意义
nodeValue
获取节点的值 属性节点为属性值，文本节点为文本值，元素节点无意义
（2）childNodes 获取节点全部子元素，返回节点对象数组
（3）parentElement 获取父元素对象
（4）firstChild 获取第一个子元素对象
lastChild 获取最后一个子元素对象

2.事件（暂时不全）
（1）点击事件 onclick 鼠标点击时触发（按钮等）
为按钮添加点击事件
btn.onclick = function(){}
另外在按钮属性添加单击事件为 onclick = “return 方法（）”
在表单属性中添加事件为onsubmit = “return 方法()”;
(2)发生改变事件 onchange 当元素发生改变时触发 （复选框、单选按钮等）
为复选框添加发生改变事件
check.onclick = function(){}

3.获取下拉列表框被选中的值
（1）获取下拉列表对象
var selectd = document.getElement(“id”);
(2)获取下拉列表框被选中的索引
var index =selected.selectedIndex;
(3)根据索引获取下拉列表框被选中的值
var value = selected.options[index].value;
4.deleteRow(index) 删除一行 index为下标索引，可用于删除表格中的一行