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(对象))

相关推荐