JavaScript操作DOM对象

最新推荐文章于 2022-11-12 10:25:59 发布
最新推荐文章于 2022-11-12 10:25:59 发布
阅读量241 收藏
点赞数
分类专栏： JavaScript JavaScript基本语法 文章标签： js JavaScript完全学习手册 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sssec/article/details/107078957
版权

什么是DOM

DOM是Document Object Model的缩写，即文档对象模型，是基于文档编程的一套API接口，1998年，W3C发布了一级的DOM规范，这个规范允许访问和操作HTML页面中的每个单独远古三，如网页的表格、图片、文本、表单元素等。

DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

  1. Core DOM - 所有文档类型的标准模型
  2. XML DOM - XML 文档的标准模型
  3. HTML DOM - HTML 文档的标准模型

小结：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

节点与节点之间的关系

DOM是以树状结构组织的HTML文档，根据DOM概念，我们可以知道，HTML文档中每个标签或元素都是一个节点，在DOM中是这样规定的：

  • 整个文档是一个文档节点
  • 每个HTML标签是一个元素节点
  • 包含在HTML元素中的文本是文本节点
  • 每个HTML属性是一个属性节点
  • 注释属于注释节点

HTML DOM 模型被结构化为对象树：
在这里插入图片描述
使用父(parent)、子(child)和同胞(sibling)等术语来描述这些节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点，关系如下：

  • 在节点树中，顶部节点被称为根(root)，如<html>节点

  • 每个节点都有父节点，除了根（它没有父节点），如<head>和<body>的父节点都是<html>

  • 一个节点可以拥有任意数量的子节点，如<body>节点的子节点有<a>，<h1>。

  • 同胞节点是拥有相同父节点的节点，如<a>和<h1>就是兄弟节点，它们的父节点均为<body>节点

常用节点分为四类

  1. 文档节点（document）：整个HTML文档 document对象作为window对象的属性存在 的，我们不用获取可以直接使用。
  2. 元素节点（Element）：HTML文档中的HTML标签
  3. 属性节点（Attr)：元素的属性 表示的是标签中的一个一个的属 性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
  4. 文本节点（Text）：HTML标签中的文本内容

访问节点

  1. 通过 id 找到 HTML 元素 document.getElementById(“dv”)
    它是document对象特有的函数。该方法返回一个有着给定id属性值的元素节点对应的对象。

  2. 通过 name属性找到 HTML 元素document.getElementsByName(“btn”)
    方法可返回带有指定名称的对象的集合

  3. 通过标签名找到 HTML 元素 getElementsByTagName(“input”);
    可返回一个对象数组，每个对象分别对应着文档里有着给定标签的一个元素。
    该方法也只有一个参数，该参数是标签的名字。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function changeContent(){
				var spn = document.getElementById("sp");
				spn.innerHTML = "SS";
			}
			
			function getHobbies(){
				var hb = document.getElementsByName("hobby");
				for(var i = 0; i<hb.length; i++){
					if(hb[i].checked){
					alert(hb[i].value);
				}
			}	
		}
			
			function getValues(){
				var inputs = document.getElementsByTagName("input");
				for(var i = 0;i<inputs.length;i++){
						document.getElementById("dv").innerHTML += inputs[i].value;
				}
			} 
		</script>
	</head>
	<body>
		<span id="sp">国王</span>
		<input type="button" value="点击换内容" onclick="changeContent()" />
		
		<input type="checkbox" name="hobby" value="paly" />玩游戏
		<input type="checkbox" name="hobby" value="read" />读小说
		<input type="checkbox" name="hobby" value="swim" />去游泳
		<input type="button" name="btn" value="点击 " onclick="getHobbies()"/>
		
		<input type="button" name="btn" value="通过input标签获取值" onclick="getValues()"/>
		<div id="dv"></div>
	</body>
</html>

节点信息

1）nodeName(节点名称)

元素节点 nodeName 是标签名
属性节点 nodeName 是属性名称
文本节点 nodeName 永远都是#text
文档节点 nodeName 永远都是#document

2）nodeValue(节点值)

对于文本节点 nodeValue 显示文本内容
对于属性节点 nodeValue 显示属性值
nodeValue 对于文档节点和元素节点不可用的

3）nodeType(节点类型)
nodeType属性可返回节点的类型，是一个只读属性，如返回的是元素节点、文本节点、注释节点等。

元素 1
属性 2
文本 3
注释 8
文档 9

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>节点信息</title>
</head>
<body>
<ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>
<script>
    var nodes=document.getElementById("nodeList");
    var type1=nodes.firstChild.nodeType;
    var type2=nodes.firstChild.firstChild.nodeType;
    var name1=nodes.firstChild.firstChild.nodeName;
    var str=nodes.firstChild.firstChild.nodeValue;
    var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
    document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>
</body>
</html>

4）属性(查找节点)

  1. firstChild 第一个儿子
  2. lastChild 最后一个儿子
  3. childNodes 所有子节点(集合)
  4. children 所有子元素的集合(不显示其他节点)
  5. parentNode 父节点
  6. nextSibling 下一个兄弟节点
  7. previousSibling 上一个兄弟节点
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>访问节点</title>
    <style>
    	body,ul,li,div,section,header{margin: 0;padding: 0;}
ul,li{list-style: none;}
body{
    font-family: "微软雅黑";
    font-size: 12px;
    line-height: 28px;
}
#news{
    border: 1px solid #cccccc;
    width: 280px;
    overflow: hidden;
    margin: 5px auto 0 auto;
}
#news header{
    border-bottom: 1px solid #cccccc;
    font-size: 16px;
    line-height: 40px;
    padding-left:15px;
    color: #666666;
    font-weight: bold;
}
#news header a{text-decoration: none; color: #666666; float: right; padding-right: 10px; font-size: 12px;}
#news ul li{padding-left: 10px;}
#news ul li a{color: #686868; text-decoration: none; display: inline-block;}
#news ul li a:hover{color: #b02f4a;}

    </style>
</head>
<body>
<section id="news">
	<header>京东快报<a href="#">更多 ></a></header>
	<ul>
	    <li><a href="#">志玲姐姐：墨镜300减30</a></li>
	    <li><a href="#">京东无锡馆正式启动</a></li>
	    <li><a href="#">99元抢平板！品牌配件199-100</a></li>
	    <li><a href="#">节能领跑京东先行</a></li>
	    <li><a href="#">高洁丝实力撩货，领券五折</a></li>
	</ul>
</section>
<script>
    var obj=document.getElementById("news");
    var str=obj.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
    var str=obj.lastChild.lastChild.previousSibling.previousSibling.innerHTML;
    var str=obj.lastElementChild.firstElementChild.innerHTML||obj.lastChild.firstChild.innerHTML;
//   var str =obj.children[1].children[2].innerHTML;
    alert(str);
</script>
</body>
</html>

5）方法操作(添加 修改 删除)

1、创建节点

document.createElement(‘要创建的标签名’)

2、添加节点

添加到最后appendChild
parent.appendChild(son);

添加到某个位置insertBefore
parent.insertBefore(son,position)


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择你喜欢的书</title>
    <style>
        *{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
        div{padding: 5px; text-align: center;
        }
        div span{display: block;}
    </style>
</head>
<body>
<p>选择你喜欢的书：<input type="radio" name="book" onclick="book()">我和狗狗一起活下来 <input type="radio" name="book" onclick="book()">灰霾来了怎么办</p>
<div></div>
<script>
    function book(){
        var ele=document.getElementsByName("book");
        var bName=document.getElementsByTagName("div")[0];
        if(ele[0].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/dog.jpg");
            img.setAttribute("alt","我和狗狗一起活下来");
            bName.appendChild(img);
        }
        else if(ele[1].checked){
            var img=document.createElement("img");
            img.setAttribute("src","images/mai.jpg");
            img.setAttribute("alt","灰霾来了怎么办");
            img.setAttribute("onclick","copyNode()")
            bName.appendChild(img);
        }
    }
    function copyNode(){
        var bName=document.getElementsByTagName("div")[0];
        var copy=bName.lastChild.cloneNode(false);
        bName.insertBefore(copy,bName.firstChild);
    }

</script>
</body>
</html>

3、克隆

new = old.cloneNode();

如果我们传递一个参数参数值为true 表示携带子元素一起克隆

4、设置、获取值
getAttribute（“属性名”）：用来获取属性的值

setAttribute（“属性名”，“属性值”）：用来设置属性的值

5、删除子节点

parent.removeChild(son)

6、删除自己节点

son.parentNode.removeChild(son)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>删除和替换节点</title>
    <style>
        *{padding: 0; margin: 0; font-size: 12px;}
        ul,li{list-style: none;}
        li{float: left; text-align: center; width: 140px;}
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="images/f01.jpg" id="first">
            <p><input type="button" value="删除我吧" onclick="del()"></p>
        </li>
        <li>
            <img src="images/f02.jpg" id="second">
            <p><input type="button" value="换换我吧" onclick="rep()"></p>
        </li>
    </ul>
<script>
    function del(){
        var delNode=document.getElementById("first");
        delNode.parentNode.removeChild(delNode);
    }
    function rep(){
        var oldNode=document.getElementById("second");
        var newNode=document.createElement("img");
        newNode.setAttribute("src","images/f03.jpg");
        oldNode.parentNode.replaceChild(newNode,oldNode);
    }
</script>
</body>
</html>

常用事件

在这里插入图片描述

ihs725
关注
专栏目录
第3章 javaScript操作 Dom对象 课后作业：
gz98411的博客
07-17 4802
1，图片轮播 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片轮播&lt;/title&gt; &lt;style&gt; .scroll{width: 360
JavaScript-操作DOM对象
Mu木
11-25 524
Document Object Model（文档对象模型） 由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。 DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作： 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容； 遍历：遍历该DOM节点下的子节点，以便进行进一步操作； 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点； 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内
JavaScript DOM对象操作详解
Ziuc的博客
05-15 168
获得DOM对象 DOM：文档对象模型，而浏览器就是一个DOM树形结构。 针对DOM的操作，有： 更新：更新DOM节点（修改） 遍历：得到DOM节点 删除：删除一个DOM节点 添加：添加一个DOM节点 要操作一个DOM节点，就必须要先获得这个DOM节点。 使用原生代码获取 <div id="father"> <h1>标题1</h1> <p id="p1">"P1"</p> <p id="p2">"P2"</p&g
一文吃透JavaScript中的DOM知识及用法
不迁怒，不贰过。小知识，大智慧。
11-12 4244
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
javascript学习基础笔记之DOM对象操作
01-19
DOM文档对象模型是HTML和XML的应用程序接口（API），DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限，并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API，意味着它的实现并不是与javascript绑定，这在于初学者来说可能会理解错误。DOM是针对XML的基于树的API，它关注的不仅仅是解析XML代码，而是用一系列相互关联的对象来表示这些代码，而这些对象可以被修改，而且无需重新解析代码就能直接访问它们。由于DOM的使用上的简便，因此它成为了Web浏览器和javascript最喜欢的方法。document对象是BOM的对
Javascript操作dom对象之select全面解析
12-29
　<select id=university> 北京大学>北京大学 ...1.获取select对象； var university=document.getElementById(university); 2.获取select选中option的index值； var index=university.selectedIndex;
jquery对象和javascript对象即DOM对象相互转换
12-09
相比之下，DOM对象是JavaScript内建的对象，用于直接操作HTML元素。我们可以通过原生的`document.getElementById`，`document.querySelector`等方法获取DOM对象。一旦我们有了DOM对象，就可以调用它的属性和方法，如...
JavaScript简单遍历DOM对象所有属性的实现方法
10-23
以上知识点是关于如何使用JavaScript操作DOM对象以及如何获取和遍历对象属性的基础。掌握这些技能对于进行Web前端开发是非常关键的。开发人员在实际应用中可能还需要针对特定情况采用不同的遍历和操作策略，但上述...
JavaScript实现DOM对象选择器
10-21
在JavaScript中，实现DOM对象选择器的功能是前端开发中的一项基础且常用的操作。通过使用选择器，开发者可以轻松地找到页面上的元素，并对其进行操作。常见的选择器类型有： 1. ID选择器：根据元素的id属性值选取...
JavaScript变量Dom对象的所有属性
10-15
在标题和描述中提到的“JavaScript变量Dom对象的所有属性”是指通过JavaScript获取和操作DOM元素时涉及到的各种属性。以下是一些重要的DOM对象属性： 1. **id** - 这个属性对应于HTML元素中的`id`属性，它是唯一...
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
JavaScript操作DOM
weixin_40745422的博客
04-18 231
一，DOM操作分类使用JavaScript操作DOM时通常分三类：DOM Core（核心），HTML-DOM和CSS-DOM   1.DOM Core DOM Core 不是JavaScript的专属品，任何一种支持DOM的编辑器语言都可以使用它,它的用途不仅限于处理一种使用标记语言编写出来的文档如HTML文档,getElementById()/getElementByTagName()等方法都是...
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 7543
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
JavaScript中操作DOM对象重点总结
妖精小狗的博客
08-31 6872
DOM： Document Object Model（文档对象模型）   节点和节点关系： 访问节点： 使用getElement系列方法访问指定节点：getElementById( )、getElementsByName( )、getElementsByTagName( ) 根据层次关系访问节点 节点的属性： 属性名称 描述 ...
试题与解析---JavaScript（二）
leondong_56828的博客
01-13 2070
1.以下对call() 和 apply() 说法哪些是正确的 () D中，apply可以将一个数组转换为一个参数列表([p1,p2,p3]转换为p1,p2,p3) var arr=[1,2,3,4] console.log (Math.max.apply(null,arr))//4 Math.max()只能传数字，可以使用apply将数组转为一个一个参数传入. 因为Math.max 参数里面只支持Math.max(param1,param2,param3…),所以可以根据刚才apply的这一特点来解决
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值