javascript DOM操作

DOM

文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型

通过可编程的对象模型，javascript获得了足够的能力来创建动态的HTML
javascript能够改变页面中的所有HTML元素
javascript能够改变页面中的所有HTML属性
javascript能够改变页面中的所有CSS样式
javascript能够对页面中的所有事件做出反应

DOM节点树

DOM模型被构造为对象的树
这棵树的根就是document对象

DOM操作

查找节点
读取节点信息
修改节点信息
创建新节点
删除节点

读取、修改某一个节点的内容

节点信息
nodeName： 节点名称
元素节点和属性节点：标签或者属性名称
文本节点： 永远是#text
文档节点： 永远是#document
nodeType： 节点类型
返回数值
元素节点： 返回1
属性节点： 返回2
文本节点： 返回3
注释节点： 返回8
文档节点： 返回9

用 document.getElementById(“”);取到的是节点，
如：
var t = document.getElementById(“t1”);
然后t.nodeName 就会返回这个节点的名，比如返回TABLE
t.nodeType 会返回对应的数字

元素节点的内容

innerText
设置或获取位于对象起始和结束标签内的文本
innerHTML
设置或获取位于对象起始和结束标签内的HTML

用innerHTML会返回包括标签，空格的所有。。。都有
但是用innerText会返回只有这个节点的所有文本，不包含标签等等。

节点属性

getAttribute()方法：根据属性名称获取属性的值
setAttribute()方法、removeAttribute()

t.getAttribute(“width”);获取t节点的width属性的值
然后，设置
t.setAttribute(“width”,”30%”)
设置了t节点的width属性的值为30%；

移除节点的属性

t.removeAttribute(“width”)
移除t节点的width属性；

元素节点的样式

style属性
node.style.color
node.style.fontSize
className属性

例如：

6666123qwe

var o = document.getElementById(“p1”);
o.style.color = “red”;
o.style.fontSize = 20;
//或者

o.className = “样式类名称”;

可以用 js来控制修改样式。

查询节点

如果需要操作HTML元素，必须首先找到该元素
查询节点的方式：
通过id查询
通过层次（节点关系）查询
通过标签名称查询
通过name属性查询

根据ID查询就是那个getElementById(“ ”);

根据层次查询节点

parentNode
遵循文档的上下层次结构，查找单个父节点
childNodes
遵循文档的上下层次结构，查找多个子节点

不能直接去找兄弟，要先找父亲，然后找用父亲找孩子，返回数组，然后下标定位，找到兄弟

想找兄弟，要先去找上级

根据标签名查询节点

getElementsByTagName()
根据指定的标签名称返回所有的元素
忽略文档的结构
查找整个HTML文档中所有的元素
如果标签名错误，则返回长度为0的节点列表
返回一个节点列表（数组）
使用节点列表的length属性获取个数

根据name属性节点查询节点

document.getElementsByName()
根据标签的name属性的值进行查询

如:

<input type=”radio” name=”sex” value=”0” />

<input type=”radio” name=”sex” value=”1” />

<input type=”radio” name=”state” value=”2” />

<input type=”radio” name=”state” value=”3” />

<input type=”radio” name=”state” value=”4” />

var nodes = document.getElementsByName(“sex”);
alert(nodes.length);   //2

记得之前学的写选择框中，一个name的只能选一个~

一个name是一组，可以用ByName去取一个组

查询节点总结：

1、document.getElementById(id)
根据id查询节点

2、element.parentNode
获取节点的父亲
element.chilNodes
获取节点的所有孩子，包括空格
element.getElementsByTagName(元素名)
获取节点的孩子，不包括空格

3、document.getElementByName(name)
根据名称查询节点，得到一组同名的节点，常用在表单中。

增加删除创建节点

创建节点
document.createElement(elementName)
elementName:要创建的额元素标签名称
返回新创建的节点

//创建新节点

var newNode = document.createElement(“input”);

//设置节点的信息
newNode.type = “text”;
newNode.value = “mary”;
newNode.style.color = “red”;

先创建节点，节点的标签，然后就是在js代码中设置节点的信息。

1、创建新节点，没有显示，处于游离状态
var a = document.createElement(元素名);
a.属性 = “ ”;

2、将新节点插入到某个元素下
element.appendchild(a);
将节点a插入到element下，作为最小的孩子。
element.insertBefore(a，e); //e作为参照
将节点a插入到element下，作为其最大的孩子。

比如在一个ul下增加一个li
首先创建一个li，然后插入到ul元素下，插入分别为最后一个和第一个

用inserBefore(新节点，E)；
要在哪加新节点，写了个E就是在E前面加个新节点

出错了就是因为没有写参照的节点。。。要写参照的节点还要获取那个参照的节点。然后传入参数。

删除节点

node.removeChild(childNode)
删除某个节点
childNode 必须是node的子节点

由父节点删除其下属的某个子节点。

获取要删除的节点，获取其父节点，然后父节点删除其子节点。

！！！也可以直接子节点点parentNode.removeChile(子节点)这么的更快一些。