JavaScript Dom编程艺术-C3 DOM

来源：互联网发布：车辆识别摄像头软件编辑：程序博客网时间：2024/06/05 05:50

一、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；

}

例如：

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对页面内容刷新却不需要在浏览器里刷新页面。

0 0