一、DOM代表什么
D：document（文档），网页加载到Web浏览器时，把编写的网页文档转化为一个文档对象。
O：object（对象），document对象主要功能就是处理网页内容。
M：model（模型），一个以HTML为根节点的节点树模型,节点分为三种，每个节点都是一个对象。
二、树节点（node）
包括元素节点、文本节点和属性节点。
1.元素节点（element node）
如<body>、<p>、<ul>等，标签的名字就是元素的名字。
2.文本节点（text node）
总是被包含在元素节点之间。
3.属性节点（attribute node）
属性节点总是被包含在元素节点中
附加：CSS基础概念
selector {
property：value；
}
例如：
p{
color：yellow；
font-family：”arial“，scan-serif；
font-size： 1.2em；
}
CSS子节点将自动继承（inheritance）父节点的样式。
为了区别开不同的元素，使用class属性或id属性。
class 如底下：
<p class="sp">This paragraph use sp class</p>
<h2 class= "sp">h2 use sp clasee </h2>
//对所有class=sp的元素进行设置
.sp {
font-style:italic;
}
//对h2内.sp的进行设置
h2.sp{
text-transform:uppercase;
}
id如底下：
#id{
property:value;
}
//id底下的元素
#id elementName {
property:value;
}
三、获取元素
有三种DOM方法可湖区元素节点，元素ID、标签名、类名字。
1.getElementById
document.getElementById(idValue); //因为id是独一无二的，所以直接用document来获取
返回一个对象Object
2.getElementsByTagName
element.getElementByTagName(tag);//可以通过一般的元素来获取元素数组
返回一个对象数组 //即使只有一个元素也是数组
//某份文档里共有多少个元素节点
document.getElementsByTagName("*").length;
3.getElementsByClassName(html5支持)
document.getElementsByClass(class [class1]) //与类名顺序和类名数量无关，即含有这些类即可
返回一个对象数组
//老版本实现方法
function getElementsByClassName(node, className){
if(node.getElementsByClassName){
//使用现有方法
return node.getElementsByClassName(className);
} else {
var results= new Array();
var elms = node.getElementsByTagName("*");
for(var i = 0; i<elms.length;i++){
if(elems[i].className.indexOf(className)!=-1){
results[result.length] = elems[i];
}
}
return results;
}
}
四、获取和设置属性值
1.object.getAttribute(attribute);
object不包括document
2.object.setAttribute(attribute,value);
object不包括document
在setAttribute后，文档本身的源代码不会改变。表现了DOM的工作模式，先加载文档的静态内容，再动态啊U心，动态刷新后不影响文档的静态内容，DOM对页面内容刷新却不需要在浏览器里刷新页面。
扫一扫
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
