DOM学习记要
DOM学习记录
一.DOM
作用： DOM（Document Object Model）
1.document 文档 HTML XML 文件（标记语言）
2.Object 对象（HTML元素转换成的js对象）
注意：如果使用js操作HTML文档，就需要先将HTML文档结构转成JS对象
对象可以做的操作 a.操作属性；
b.操作内容；
innerText内部的文本（IE），textContent（FF）不含有标记
innerHTML有标签效果
outerText外部的文本，包含自己的标记
outerHTML内部的HTML以及自己的标签
表单中被容：用value值
c.操作样式；
//原先的background-color中的‘-’去掉，后面的首字母大写
aobj.style.backgroundColor=“red”；//这是一条一条加样式
如果是加多个样式则可以设置一个类，在类中设置多条属性即可
使用：aobj.className="classname"//classname是你之前取得类名
如果是加多个类样式则需要：aobj.className="classname1 classname2"或者aobj.className=“classname1”aobj.className+=“ classname2”
有了以上3点的操作之前先转成对象，2种方式：
1.通过标记名（返回的是数组即多个需要拿到其中一个）、id名（id一般唯一）、name（多个）
document中的三个方法
var objs=document.getElementsByTagName("a"); objs.href="";
var objs=document.getElementById("one")；返回的是一个对象(id不能重复，否则不能确定是活儿那一个对象)
var objs=docuemnt.getElementsByName("two");返回的是一个数组，应该后面加上[0]可以获得第一个对象
//这些代码应该在标记之后，否则找不到可能出错
转换成对象后若想看到该对象中的属性可使用如下代码：
var aobj=document.getElementById("alink");
var pro="";
for(pro in aobj){
document.write("a."+pro+"="+aobj[pro]+"<br>");
}
2.通过数组等方式
window.frame
document.image=[object]
document.anchors=[object]
document.forms=[object]
document.links=[object]
document.all=[object]
document.applets=[object]等等
其中数组可以通过[]的方式访问或者.的方式访问：例如
document.forms[1].username.value
document.forms["frm2"].username.value
document.forms[1]["username"].value
document.forms.item(1).username.value
document.forms.frm2.username.value
document.forms.item("frm2").username.value
document["frm2"].username.value
document.frm2.username.value
3.Model.
一.将文档想象成一个倒树，每一部分（元素、内容、属性、注释）都是节点
二.只要知道一个节点，根据关系找到其他节点
父节点parentNode
子节点（第一个、最后一个）childNodes、 firstChild、lastChild
兄弟节点（上一个、下一个） nextSibling、previousSibling
三、找到节点：节点类型nodeType、节点名nodeName、节点值nodeValue
在一个文档中不能用输出的方式增加一些节点或者减少一个节点，因为文档流结束了，必须用节点来操作；
（创建节点document.createElement("a")，
插入到指定的位置---元素.appendChild(元素),在a对象的b对象之前插入c对象用a.insertBefore(c,b)。
删除节点--对象.removeChild(对象)）
一.DOM
作用： DOM（Document Object Model）
1.document 文档 HTML XML 文件（标记语言）
2.Object 对象（HTML元素转换成的js对象）
注意：如果使用js操作HTML文档，就需要先将HTML文档结构转成JS对象
对象可以做的操作 a.操作属性；
b.操作内容；
innerText内部的文本（IE），textContent（FF）不含有标记
innerHTML有标签效果
outerText外部的文本，包含自己的标记
outerHTML内部的HTML以及自己的标签
表单中被容：用value值
c.操作样式；
//原先的background-color中的‘-’去掉，后面的首字母大写
aobj.style.backgroundColor=“red”；//这是一条一条加样式
如果是加多个样式则可以设置一个类，在类中设置多条属性即可
使用：aobj.className="classname"//classname是你之前取得类名
如果是加多个类样式则需要：aobj.className="classname1 classname2"或者aobj.className=“classname1”aobj.className+=“ classname2”
有了以上3点的操作之前先转成对象，2种方式：
1.通过标记名（返回的是数组即多个需要拿到其中一个）、id名（id一般唯一）、name（多个）
document中的三个方法
var objs=document.getElementsByTagName("a"); objs.href="";
var objs=document.getElementById("one")；返回的是一个对象(id不能重复，否则不能确定是活儿那一个对象)
var objs=docuemnt.getElementsByName("two");返回的是一个数组，应该后面加上[0]可以获得第一个对象
//这些代码应该在标记之后，否则找不到可能出错
转换成对象后若想看到该对象中的属性可使用如下代码：
var aobj=document.getElementById("alink");
var pro="";
for(pro in aobj){
document.write("a."+pro+"="+aobj[pro]+"<br>");
}
2.通过数组等方式
window.frame
document.image=[object]
document.anchors=[object]
document.forms=[object]
document.links=[object]
document.all=[object]
document.applets=[object]等等
其中数组可以通过[]的方式访问或者.的方式访问：例如
document.forms[1].username.value
document.forms["frm2"].username.value
document.forms[1]["username"].value
document.forms.item(1).username.value
document.forms.frm2.username.value
document.forms.item("frm2").username.value
document["frm2"].username.value
document.frm2.username.value
3.Model.
一.将文档想象成一个倒树，每一部分（元素、内容、属性、注释）都是节点
二.只要知道一个节点，根据关系找到其他节点
父节点parentNode
子节点（第一个、最后一个）childNodes、 firstChild、lastChild
兄弟节点（上一个、下一个） nextSibling、previousSibling
三、找到节点：节点类型nodeType、节点名nodeName、节点值nodeValue
在一个文档中不能用输出的方式增加一些节点或者减少一个节点，因为文档流结束了，必须用节点来操作；
（创建节点document.createElement("a")，
插入到指定的位置---元素.appendChild(元素),在a对象的b对象之前插入c对象用a.insertBefore(c,b)。
删除节点--对象.removeChild(对象)）