DOM学习记录
一.DOM
作用:DOM(DocumentObjectModel)
1.document文档HTMLXML文件(标记语言)
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="classname1classname2"或者aobj.className=“classname1”aobj.className+=“classname2”
有了以上3点的操作之前先转成对象,2种方式:
1.通过标记名(返回的是数组即多个需要拿到其中一个)、id名(id一般唯一)、name(多个)
document中的三个方法
varobjs=document.getElementsByTagName("a");objs.href="";
varobjs=document.getElementById("one");返回的是一个对象(id不能重复,否则不能确定是活儿那一个对象)
varobjs=docuemnt.getElementsByName("two");返回的是一个数组,应该后面加上[0]可以获得第一个对象
//这些代码应该在标记之后,否则找不到可能出错
转换成对象后若想看到该对象中的属性可使用如下代码:
varaobj=document.getElementById("alink");
varpro="";
for(proinaobj){
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(对象))