您现在的位置是:网站首页>Javascript编程Javascript编程

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

少儿编程网2020-02-14 18:50:17Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介本篇文章给大家带来的内容是关于JavaScript中DOM的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。1、DOM:文档对象(document)模型。将整个html页面看作一棵倒挂的树,html就是这棵树根节点,head,body就是这棵树的子节点。DOM模型

www.pxcodes.com
<link href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-f57960eb32.css" rel="stylesheet" />

本篇文章给大家带来的内容是关于JavaScript中DOM的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

1、DOM:文档对象(document)模型。将整个html页面看作一棵倒挂的树,html就是这棵树根节点, head,body就是这棵树的子节点。DOM模型要求将html中每对标签看作节点对象来操作N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

2.DOM的作用:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

JavaScript 能够改变页面中的所有 HTML 元素N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

JavaScript 能够改变页面中的所有 HTML 属性N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
JavaScript 能够改变页面中的所有 CSS 样式N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
JavaScript 能够对页面中的所有事件做出反应N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

3.DOM查找页面中的元素节点对象:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

3.1:通过id查找页面中一个元素节点对象N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

var ob1=document.getElementById("d1");
 //将节点对象中内容输出
 alert(ob1.innerHTML);

3.2:通过标签名查找页面中元素节点集合或数组N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

var arr1=document.getElementsByTagName("h2");
//遍历节点对象集合,输出每个对象的内容
for(var i=0;i<arr1.length;i++){
alert(arr1[i].innerHTML);
 }

3.3:通过类名查找页面中元素节点集合或数组N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

var arr2=document.getElementsByClassName("c1");
            //遍历节点对象集合,输出每个对象的内容
            for(var i=0;i<arr2.length;i++){
                    alert(arr2[i].innerHTML);
            }

3.4:通过name属性来查找元素节点集合或数组N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

var arr3=document.getElementsByName("hobby");
            //遍历节点对象集合,输出每个对象的value属性值
            for(var i=0;i<arr3.length;i++){
                alert(arr3[i].value);
           }

4.DOM操作节点对象的内容(标签中文本内容,子标签,子标签文本......):N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
4.1:获得节点内容:节点对象.innerHTMLN3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

alert(ob1.innerHTML);

4.2:修改节点内容: 节点对象.innerHTML=“新值”;N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

ob1.innerHTML="哈哈";

4.3:清空节点内容:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

ob1.innerHTML="";

5.DOM操作节点对象的文本内容(标签中的文本和子标签中的文本......):N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
5.1:获得节点文本内容(标签中的文本和子标签中的文本):节点对象.innerTextN3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

alert(ob1.innerText);

5.2:修改节点文本内容(标签中的所有内容都修改):节点对象.innerText=“新值”;N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

ob1.innerText="呵呵";

6.DOM操作节点对象的属性:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
6.1:获得节点对象的属性:节点对象.属性名N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

 alert(ob2.src);

6.2:修改节点对象属性:节点对象.属性名=“值”;N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

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

6.3:删除节点对象的属性:节点对象.removeAttribute("属性名");N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");

7.DOM操作节点对象样式:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
7.1:设置节点对象的样式:节点对象.style.样式名=“样式值”;N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

ob1.style.color="red";
ob1.style.backgroundColor="blue";

7.2: 获得节点对象的样式: 节点对象.style.样式名N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

alert(ob1.style.color);

8.事件N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
8.1:onload:页面加载完事件。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
8.2:onclick:鼠标单击事件。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
8.3:onchange:改变事件。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
8.4:onblur:光标离开事件。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
8.5:onfocus:获得光标事件。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
8.6:onmouseover:鼠标经过事件。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
8.7:onmouseout:鼠标离开事件。N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

9.DOM操作节点对象N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
9.1:创建节点对象:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
9.1.1:创建标签节点对象:document.createElement("标签名");N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

//创建节点对象
var node1=document.createElement("p");

eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好<span>中国</span>";

9.1.2:创建文本对象:document.createTextNode("文本内容");N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

//创建文本对象
var node1text=document.createTextNode("这是一个段落");

9.2:添加节点对象:节点对象.appendChild(子节点);N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

//将节点对象添加body中
document.getElementById("d1").appendChild(node1);
//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"<h2>哈哈</h2><p>呵呵呵</p>";

9.3:删除节点对象:父节点对象.removeChild(子节点对象);N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

//获得父节点对象
var parentNode=document.getElementById("d1")
 //获得要删除的子节点对象
 var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象,只有谷歌,火狐
childNode.remove();

9.4:复制节点对象:节点对象.cloneNode(true);N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台
eg:N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制,false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);

9.5: 替换元素中的子节点:父节点对象.replaceChild(newnode,oldnode);N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

以上就是JavaScript中DOM的详细介绍(代码示例)的详细内容,更多请关注少儿编程网其它相关文章!N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

来源:php中文网N3o少儿编程网-Scratch_Python_教程_免费少儿编程学习平台

www.pxcodes.com

相关文章:

支持一下 ( )

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

      匿名评论
    • 评论
    人参与,条评论
    JavaScript中DOM的详细介绍(代码示例)

客服在线

服务时间

周一至周日 9:00-21:00