学习javascript DOM的笔记

一、DOM
作用：
　　DOM（Document Object Model）

1.document 文档 HTML XML （标记语言）
<body>
　　<div>
　　　　<a>你好</a>
　　</div>
</body>
2.object 对象（HTML元素转成的对象(js对象)）
注意：如果使用js操作HTML文档，就需要先将HTML文档结构转成JS对象
　　a.操作属性

　　b.操作内容
　　innerText
　　innerHTML
　　outerText
　　outerHTML

　　表单
　　value
　　c.操作样式
　　　对象名.style.background="#ccc";
注意：标签里面有"-"的要去掉，后面的单词首字母大写(如：font-size)
　　aobj.style.fontSize="3cm";

className

　　对象名.className="class1";//当个引用
　　对象名.className+=" class2";//多个引用,注意class前面要有空格

　　对象名.className="class1 class2"
　　对象名.className="";//清除样式

有以上三点的操作之前先转成对象

转成对象的两种形式：
1.标记名（多个）、id（唯一）、name（多个）

　　document中的三个方法

　　var 对象名=document.getElementsByTagName("标签名");
　　var 对象名=document.getElementsById("id名");
　　var 对象名=document.getElementsByName("name名");

2.通过数值

　　document.title="你好";
　　document.body=[object];
　　document.frames=[object];

　　document.all=[object];
　　document.embeds=[object];
　　document.scripts=[object];
　　document.applets=[object];
　　document.image=[object];
　　document.forms=[object];
　　document.anchors=[object];
　　document.styleSheets=[object];
　　document.links=[object];

有七种访问方式：
例子：
<form name="frm1">
<input type="text" name="username" value="赵丹"><br />
</form>

document.forms[0].username.value；
document.forms["frm1"].username.value;
document.forms.item(0).username.value;
document.forms.item("frm1").username.value;
document.forms.frm1.username.value;
document.frm1.username.value;
document["frm1"].username.value;
　　3.Model 模式
　　　　a、将文档想成一个倒树，每一个部分（元素，内容，实行，注释）都是一个节点
　　　　b、只要知道一个节点，按关系就可以找到其他的节点
　　　　　　　　父节点 parentNode
　　　　　　　　子节点（第一个，最后一个） childNodes firstChild lastChild
　　　　　　　　同胞节点（上一个，下一个） nextSibling previousSibling

　　　　c、找到节点：节点类型nodeType、节点名nodeName、节点值nodeValue

　　　　每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
　　　　　　　　nodeName(节点名称)
　　　　　　　　nodeValue（节点值）
　　　　　　　　nodeType（节点类型）

　　nodeName属性含有节点的名称
　　　　元素节点的nodeName是标签名称
　　　　属性节点的nodeName是属性名称
　　　　文本节点的nodeName永远是#text
　　　　文档节点的nodeName永远是#document
　　注释：nodeName所包含的XML元素的标签名称永远是大写的
　　　　对于文本节点，nodeValue属性包含文本。
　　　　对于属性节点，nodeValue属性包含属性值。
　　　　nodeValue属性对于文档节点和元素节点是不可用的。

　　　　nodeType属性克返回节点的类型。
　　　　最重要的节点类型是：
　　　　元素类型　　　　　　　　节点类型
　　　　　元素　　　　　　　　　　 1
　　　　　属性　　　　　　　　　　 2
　　　　　文本　　　　　　　　　　 3
　　　　　注释　　　　　　　　　 8
　　　　　文档　　　　　　　　　　 9

　　可以在一个文档流中
　　　　1.创建节点
　　　　　　document.createElement("img");

　　　　　　appendChild();
　　　　　　insertBefore();
　　　　2.添加到文档流中
　　　　3.删除节点
　　　　　　removeChild();

自己学习javascript DOM总结的一部分知识点和需要注意的。