JS基础之DOM的作用和使用实例讲解
一、dom
作用：
dom (document object model)
1、document 文档 html xml文件 (标记语言)
<body>
<p>
<a>www</a>
</p>
</body>
2、object对象(html元素转成的对象(js对象))
注意：如果使用js操作html文档，就需要选将html文档结构转成js对象
a、操作属性
b、操作内容
innertext 只修改文本 (ie可以用) textcontent(火狐可以用)
innerhtml 可以连同标签一起修改
outertext
outerhtml(取外部)
表单
取value值
c、操作样式
aobj.style.backgroundcolor="red";
aobj.style.fontsize="3cm";
classname(批量操作)
aobj.classname="test";
aobj.classname+=" demo";
aobj.classname="";
有了以上三点的操作之前先转成对象
转成对象的两种形式：
1、标记名(多个)、id(唯一)、name(多个)
document中的三个方法
var objs=document.getelementsbytagname("p");
var objs=document.getelementbyid("one");
var objs=document.getelementsbyname("user");
2、通过数组
document.title=
document.body=[object]
window.frames=[object]
document.all=[object] //统计所有标记
document.embeds=[object]
document.scripts=[object]
document.applets=[object]
document.images=[object]
document.forms=[object]
document.anchors=[object]
document.stylesheets=[object]
document.links=[object]
有7种访问方式
一、将文档想成一个倒树(层次结构),每一个部分(元素、内容、属性、注释)都是一节点。
二、只要知道一个节点，按关系找到其他节点
父节点： parentnode
子节点(第一个，最后一个) childnodes firstchild lastchild
同胞节点(上一个，下一个) nextsibling previoussibling
<html>
<head>
</head>
<body>
<p>
<p>
<span><a></a></span>
</p>
<p>
<span><a></a></span>
</p>
</p>
<form>
<input>
</form>
</body>
</html>
三、找到节点，节点类型nodetype、节点名nodename、节点值nodevalue
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
节点类型nodetype
节点名nodename
节点值nodevalue
nodename属性有节点的名称
元素节点的nodename是标签名称
属性节点的nodename是属性名称
文本节点的nodename永远是#text
文档节点的nodename永远是#document
注释：nodename所包含的xml元素的标签名称永远是大写的
对于文本节点，nodename属性包含文本
对于属性节点，nodename属性包含属性值
nodevalue属性对于文档节点和元素节点是不可用的
nodetype属性可返回节点的类型
最重要的节点类型：
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
可以在一个文档流中
1、创建节点
document.createelement("a");
appendchild( );
insertbefore( );
2、添加到文档流中
3、删除节点
removechild( );