学习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>
<form name="frm2">
<input type="text" name="username" value="赵"><br />
</form>
<form name="frm3">
<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总结的一部分知识点和需要注意的。