JavaScript中DOM的详细介绍(代码示例)

JavaScript中DOM的详细介绍(代码示例)
2021年08月19日18:16:38 0 544

JavaScript中DOM的详细介绍(代码示例)

 

1、DOM:文档对象(document)模型。将整个html页面看作一棵倒挂的树,html就是这棵树根节点, head,body就是这棵树的子节点。DOM模型要求将html中每对标签看作节点对象来操作

2.DOM的作用:

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

3.DOM查找页面中的元素节点对象:

3.1:通过id查找页面中一个元素节点对象

eg:

var ob1=document.getElementById("d1");

//将节点对象中内容输出

alert(ob1.innerHTML);

3.2:通过标签名查找页面中元素节点集合或数组

eg:

var arr1=document.getElementsByTagName("h2");

//遍历节点对象集合,输出每个对象的内容

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

alert(arr1[i].innerHTML);

}

3.3:通过类名查找页面中元素节点集合或数组

eg:

var arr2=document.getElementsByClassName("c1");

//遍历节点对象集合,输出每个对象的内容

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

alert(arr2[i].innerHTML);

}

3.4:通过name属性来查找元素节点集合或数组

eg:

var arr3=document.getElementsByName("hobby");

//遍历节点对象集合,输出每个对象的value属性值

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

alert(arr3[i].value);

}

4.DOM操作节点对象的内容(标签中文本内容,子标签,子标签文本......):

4.1:获得节点内容:节点对象.innerHTML

eg:

alert(ob1.innerHTML);

4.2:修改节点内容: 节点对象.innerHTML=新值;

eg:

ob1.innerHTML="哈哈";

4.3:清空节点内容:

eg:

ob1.innerHTML="";

5.DOM操作节点对象的文本内容(标签中的文本和子标签中的文本......):

5.1:获得节点文本内容(标签中的文本和子标签中的文本):节点对象.innerText

eg:

alert(ob1.innerText);

5.2:修改节点文本内容(标签中的所有内容都修改):节点对象.innerText=新值;

eg:

ob1.innerText="呵呵";

6.DOM操作节点对象的属性:

6.1:获得节点对象的属性:节点对象.属性名

eg:

alert(ob2.src);

6.2:修改节点对象属性:节点对象.属性名=值;

eg:

ob2.src="img/img-2.jpg";

6.3:删除节点对象的属性:节点对象.removeAttribute("属性名");

eg:

ob2.attributes.removeNamedItem("title");

ob2.removeAttribute("title");

7.DOM操作节点对象样式:

7.1:设置节点对象的样式:节点对象.style.样式名=样式值;

eg:

ob1.style.color="red";

ob1.style.backgroundColor="blue";

7.2: 获得节点对象的样式: 节点对象.style.样式名

eg:

alert(ob1.style.color);

8.事件

8.1:onload:页面加载完事件。

8.2:onclick:鼠标单击事件。

8.3:onchange:改变事件。

8.4:onblur:光标离开事件。

8.5:onfocus:获得光标事件。

8.6:onmouseover:鼠标经过事件。

8.7:onmouseout:鼠标离开事件。

9.DOM操作节点对象

9.1:创建节点对象:

9.1.1:创建标签节点对象:document.createElement("标签名");

eg:

//创建节点对象

var node1=document.createElement("p");

eg:

//创建节点对象

var node1=document.createElement("h1");

node1.innerHTML="你好<span>中国</span>";

9.1.2:创建文本对象:document.createTextNode("文本内容");

eg:

//创建文本对象

var node1text=document.createTextNode("这是一个段落");

9.2:添加节点对象:节点对象.appendChild(子节点);

eg:

//将节点对象添加body中

document.getElementById("d1").appendChild(node1);

//直接向一个标签中添加子节点

document.getElementById("d2").innerHTML=document.getElementById

("d2").innerHTML+"<h2>哈哈</h2><p>呵呵呵</p>";

9.3:删除节点对象:父节点对象.removeChild(子节点对象);

eg:

//获得父节点对象

var parentNode=document.getElementById("d1")

//获得要删除的子节点对象

var childNode=document.getElementsByTagName("p")[0];

//删除子节点对象

//parentNode.removeChild(childNode);

//删除当前节点对象,只有谷歌,火狐

childNode.remove();

9.4:复制节点对象:节点对象.cloneNode(true);

eg:

//获得要复制的节点对象

var childNode=document.getElementsByTagName("p")[0];

//复制节点对象,true表示复制节点的同时将内容复制,false反之

var copyNode=childNode.cloneNode(true);

//将复制的节点添加到body中

document.getElementById("d1").appendChild(copyNode);

9.5: 替换元素中的子节点:父节点对象.replaceChild(newnode,oldnode);

 

打赏 点赞(0)
weinxin
投诉建议
文章名+链接地址,发送到此微信:tourism52
历史上的今天
05月
17
真正,牛逼,的,程序员,都写,C++,吗,真正,牛逼, 菜鸟教程

真正牛逼的程序员都写C++吗?

真正牛逼的程序员都写C++吗? (图片来自网络) 在程序界有一个很有意思的鄙视链,靠底层越近的开发者似乎总能睥睨更上一层的码农,然后享受智商碾压带来的舒适。 当然,以上鄙视链当段子...
HTML DOM Dialog 对象 菜鸟教程

HTML DOM Dialog 对象

HTML DOM Dialog 对象 Dialog 对象 Dialog 对象是HTML5新增的。 Dialog 对象表示 HTML dialog 元素。 注意:目前只有Chrome...
预定,变量 菜鸟教程

预定义变量1

预定义变量对于全部脚本而言,PHP 提供了大量的预定义变量。这些变量将所有的外部变量表示成内建环境变量,并且将错误信息表示成返回头。 参见 FAQ “register_g...
WML,任务,WML,任务,task,定义,了,事件,发,生时, 菜鸟教程

WML 任务

WML 任务 任务 (task) 定义了事件发生时所执行的动作,比如在输入一个卡片或选择一个链接之类的时间发生时。 Go 任务 go 任务表示切换到一个新卡片的动作。 go 任务指...
HTML DOM Audio 对象 菜鸟教程

HTML DOM Audio 对象

HTML DOM Audio 对象 Audio 对象 Audio 对象HTML5中新增的。。 Audio 对象代表着 HTML audio 元素。 访问 Audio 对象 你可以使...
RSS,发布,您的,Feed,RSS,发布,您的,Feed,只能,当, 菜鸟教程

RSS 发布您的 Feed

RSS发布您的 Feed 只能当其他人能够找到您的 RSS 文档时,它才是有用的。 把您的 RSS 发布到 Web 上 现在是时候把您的 RSS 文件上传到网上了。下面是具体的步骤...

Comment list 共有 0 条评论

暂无评论