javascript之DOM模型

通过HTML DOM可以访问所有JavaScript HTML文档的所有元素。

DOM：Document Object Model，文档对象模型。

当网页被加载时，浏览器会创建页面的文档对象模型。

HTML DOM模型被构成为对象的树：

 

通过可编程的对象模型，javascript获得了足够的能力来创建动态HTML。

• javascript能改变页面中所有html元素
• javascript能改变页面中所有html属性
• javascript能改变页面中所有CSS样式
• javascript能对页面中所有的事件作出反应

1、document对象

当浏览器载入HTML文档，它就会成为document对象。

document对象是html文档的根节点。

document对象使我们可以从脚本中对html页面的所有元素进行访问。

提示：document是window对象的一部分，可通过window.document属性进行访问。

2、document对象的常用方法

2.1、查找html元素常用方法

方法/描述

document.getElementById()

返回对拥有指定 id 的第一个对象的引用。

document.getElementsByClassName()

返回文档中所有指定类名的元素集合，作为NodeList 对象。

document.getElementsByTagName()

返回带有指定标签名的对象集合。

document.getElementsByName()

返回带有指定名称的对象集合

div


li11111111111
li111111111112
li111111111113
li111111111114
li111111111115
li111111111116

2.2 修改html内容和属性

修改内容

修改html最简单的做法是使用innerHTML属性。

修改html元素的内容的语法：

document.getElementById(id).innerHTML=新的HTML

PS：绝对不要在文档(DOM)加载完之后使用document.write()，这会覆盖该文档。

修改HTML属性：

方式1：document.getElementById(id).attribute=新属性值

方式2：document.getElementById(id).setAttribute(属性名，属性值);

div
hello world

2.3 修改html元素的css

document.getElementById(id).style.property=新样式

document.getElementById("myli").style.color="red";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";

3、HTML DOM元素

3.1、创建新的HTML元素

要创建新的HTML元素需要先创建一个元素，然后在已存在的元素中添加它。

function createNewP(){
    var newElementP=document.createElement("p");//创建一个新的段落元素
    var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
    //将文本的节点添加到新创建的元素中
    newElementP.appendChild(text);
    //获取一个页面已经存在的元素
    var div=document.getElementById("div1");
    //添加新创建的元素p到已经存在的元素div中
    div.appendChild(newElementP);
}

function createNewP2(){
    var newElementP=document.createElement("p");//创建一个新的段落元素
    var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
    //将文本的节点添加到新创建的元素中
    newElementP.appendChild(text);
    //获取一个页面已经存在的元素
    var div=document.getElementById("div1");
    var p1=document.getElementById("p1");
    //添加新创建的元素p到已经存在的元素div中，指定插入到段落p1前面
    div.insertBefore(newElementP,p1);
}

3.2、替换html元素-replaceChild()

    
这是一个段落
    
这是另一个段落

替换p1

3.3 删除元素-removeChild()