Dom模型學習

最新推荐文章于 2023-03-23 11:42:44 发布

kenbli

最新推荐文章于 2023-03-23 11:42:44 发布

阅读量107

点赞数

分类专栏： JavaScript 文章标签：浏览器脚本 XHTML D语言

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

四个非常适用的DOM方法：getElementById, getElementByTagName, getAttribute和setAttribute

比較有用的方法：
1、新建一个dom元素，参数为标签名——document.createElement("tagName")

2、把一个元素添加到某个元素下面——parentElement.appendChild(childElement)

3、获得父元素——childElement.parentNode

4、获得第一个子元素——parentElement.firstChild

5、获得所有的标签为tag的子元素——parentElement.getElementsByTagName("tag")

6、还有就是大家熟悉的document.getElementById("xid")和document.getElementsByName("yname")

文档：DOM中的”D”

DOM是”Document Object Model”（文档对象模型）的首字母所写。如果没有document(文档)，DOM也无从谈起。

对象： DOM中的”O”

“对象”是一种独立的数据集合。与某个特定对象相关联的变量被称为这个对象的属性；可以通过某个特定的对象去调用的函数被称为这个对象的方法。

JS里，对象分为三种类型：

用户定义对象：程序员自己创建的对象。
内建对象：内建在JS语言里的丢向，如Array,Math
宿主对象：浏览器提供的对象
宿主对象中，最基础的是window对象。

window对象对应着浏览器窗口的本身，这个对象的属性和方法通常被称为BOM（浏览器对象模型）。

模型： DOM中的”M”

M代表着”Model”，但说它代表着”Map”也可以。含义都是某种事物的表现形式。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过JS去读取这张地图。

先了解表述这个地图的记号的意义：

DOM把一份文档表示为一棵树，这是我们理解和运用这一模型的关键。

节点

节点（note）这个名词来自网络理论，代表着网络中的一个连接点。网络是由节点构成的集合。DOM中的节点类型还包含着其他类型的节点。

元素节点
DOM的原子是元素节点。

一个页面是由元素来构成的。而各种标签则提供了元素的名字。元素可以包含其他的元素。html元素是节点树的根元素。

文本节点
文本节点总是被包含在元素节点的内部。但并非所有的元素节点都包含有文本节点。

属性节点
注释也是一种节点类型。元素都或多或少的有一些属性。我们可以利用这个属性对包含在元素里的东西做出准确的描述。并非所有的元素都包含着属性，但素有的属性都会被包含在元素里。

getElementById()方法

DOM提供了一个名为getElementById()的方法，这个方法将返回一个与那个有着给定id属性值的元素节点相对应的对象。

这个方法是与document对象相关联的函数。在脚本代码里，函数名的后面必须跟有一组圆括号。这组圆括号包含着函数的参数。getElementById()方法只有一个参数：你想获得那个元素的id属性值。而且必须放在单引号或双引号里。

document.getElementById(”purchases”)

这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素。

我们还可以利用DOM提供的另外一种方法来提取对象

getElementsByTagName()方法

getElementByTagName()方法将返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。它的参数是XHTML标签的名字：

element.getElementsByTagName(tag)

这个方法返回的是一个数组。

document.getElementsByTagName(”li”)

这个调用将返回一个对象数组，每个对象分别对应着document对象中一个列表项（li）

我们可以利用length属性查出这个数组的元素个数。

for (var I =0 ; I < document.getElementsByTagName(”li”).length; I++) {

alert (typeof document.getElementsByTagName(”li”)[i]);

}

将方法名称赋值给变量，可以缩减打字量并提高函数的可读性，如

var items = document.getElementsByTagName(”li”);

for (var I = 0 ; I < itemts.length; i++) {

alert (typeof items[i]);

}

alert(document.getElementsByTagName(”*”).length);

可以让我们方便的获得一个页面总共有多少个元素节点。

如果只想知道其id属性值是purchase的元素包含着多少个列表项（li）的话，需要更具体的对象来调用这个方法：

var shopping = document.getElementById(”purchase”);

var items = shopping.getElementsByTagName(”*”);

在这两条语句执行完毕后，items数组将只包含其id属性值是purchase的无序清单里的元素。

3.4 趁热打铁

简要总结：

一份文档就是一棵节点树
节点分为不同类型：元素节点，属性节点和文本节点等。
getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点
getElementByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点
这些节点中的每个都是对象
3.4.1 getAttribute()方法

我们可以利用getAttribute()方法把获得的元素对象各种属性值查询出来。

var paras = document.getElementsByTagName(”p”);

for (var i = 0; i < paras.length; i++) {

alert (paras[i].getAttribute(”title”));

}

null是JS语句中的空值，若文档中含有多个未定义title属性的p标签，则会显示null。让我们重新修改这段代码，使其只在title属性存在时才弹出消息，同时提高可读性。

var paras = document.getElementsByTagName(”p”);

for (var i = 0; i < paras.length; i++) {

var title_text = paras[i].getAttribute(”title”);

if (title_text != null) {

alert(title_text);

}

}

进一步把代码缩短：当检查某项数组是否是null值时，我们其实是在检查它是否存在。这种检查可以简化为直接把被检查的数据用作if语句的条件。

if(title_text != null)可以替换为　if(title_text)

3.4.2 setAttribute()方法

修改节点属性值的方法。

此方法也是只能通过元素节点对象调用的函数，需要向它传递两个参数：

object.setAttribute(attribute, value);

下面的语句我们首先获得purchase属性的元素，然后修改这个元素的属性值。

var shopping = document.getElementById(”purchase”);

shopping.setAttribute(”title”, “a list of goods”);

若一个元素没有setAttribute()方法中定义的属性值，则会先创建这个属性，然后再赋值。

一个细节： setAttribute()方法对文档的修改，将似的文档在浏览器窗口里的显示效果发生变化，但是源代码中不会有任何修改，也就是说，这个方法的修改不会影响任何原来的文档数据，这个是DOM的工作模式决定的：先加载文档的静态内容，再以动态方式对他们进行刷新，刷新不会影响文档的静态内容。

第三章总结：

getElementById()方法
getElementsByTagName()方法
getAttribute()方法
setAttribute()方法
这四个方法将是DOM的基石。

//實例


<SCRIPT LANGUAGE="JavaScript">   

    //列表内容    
    var listItems=['aaa','bbb','ccc','ddd','eee'];    

    //创建一个ol列表，上面的数组为每个li的内容    
    function createList()    
    {    
        var myol=document.createElement("ol");    
        for(var it in listItems)    
        {    
            var tli=document.createElement("li");    
            tli.innerHTML=listItems[it];    

            //鼠标单击时调用changeColor函数    
            tli.onclick=changeColor;    
            //鼠标双击时调用removeMe函数    
            tli.ondblclick=removeMe;    

            myol.appendChild(tli);    
        }    
        document.body.appendChild(myol);    
    }    

    function changeColor()    
    {    
        //changeColor是自己加的，考虑到undefinded也是false，所以没有初始化。    
        //动态语言就是好，对象的属性和方法可以随便加。    
        if(this.changeColor)    
        {    
            this.style.background="yellow";    
            this.changeColor=false;    
        }    
        else    
        {    
            this.style.background="lightgreen";    
            this.changeColor=true;    
        }    
    }    

    function removeMe()    
    {    
        //先找到父节点，再用父节点删除自己    
        var p=this.parentNode;    
        p.removeChild(this);    

        //如果这个ul元素下的li子元素已经删除光了，就把这个ul元素也删掉。    
        if(p.getElementsByTagName('li').length==0)    
        {    
            p.parentNode.removeChild(p);    
        }    
    }    
  </SCRIPT>   
 </HEAD>   

 <BODY>   
    <button onclick="createList()">创建列表button>   
</ BODY>   
</HTML>