当前位置：网站首页>DOM简述

DOM简述

2022-08-04 09:02:00 【子慕拾】

文章目录

前言

DOM是Document Object Model的简写，既文档对象模型。
DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法。
DOM是跨平台与跨语言的。
DOM用于XHTML、XML文档的应用程序接口(API)。
DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式展示。
DOM标准是由w3c制定与维护link

一、DOM树形结构

在这里插入图片描述

二、DOM对象操作方法

1.如何操作DOM对象

如果用js操作html文档，先要将html转成js DOM对象。

示例：

<a href="http://www.sina.com" id="link" title="新浪">新浪</a>
Var obj=document.getElementById("link");    //获取dom对象

2.操作属性

所有html标签中的属性及属性值均可通过DOM来操作获取、改变、删除

示例：

DOM自带的属性如<a href=””  title=””  target=”_blank”  id=”link”> link </a>
//例子：
<a href="http://www.sohu.com" title="sohu" id="link" class="pic"></a>
window.onload = function(){
    
var linkObj=document.getElementById("link")
//改变DOM属性
linkObj.href="http://www.baidu.com";
linkObj.title="baidu";
linkObj.innerHTML="百度";
linkObj.className="link";
console.log(linkObj.href,linkObj.title,linkObj.innerHTML,linkObj.className);
	}


DOM自带的属性如<img src="" >
//例子：
<img src="img/dog.jpg" onmouseover="change('horse')" onmouseout="change('dog')" onclick="change('monkey')" id="pic">
function change(R){
    
var picObj=document.getElementById("pic")
if(R=="horse"){
    
	picObj.src="img/horse.jpg";
}else if(R=="dog") {
    
	picObj.src="img/dog.jpg";
}else {
    
	picObj.src="img/mokey.jpg";
 }
}

3.操作内容

InnerText:操作内部的文本，任何标签只当做文本处理
兼容性:innerText(IE) textContent(FF)[兼容IE低版本的浏览器]
InnerHTML(荐 兼容性好)：可带标签格式
兼容性：可同时兼容IE与FF
outerHTML取文本元素外围的标签
添加文字示例：

<div id="box">
我是Div原来的文字
</div>
<script type="text/javascript">
	var boxObj=document.getElementById("box");//dom
	boxObj.onmouseover=function(){
    //innerHTML:可带标签格式
		this.innerHTML="<font color='red'><b>我是鼠标经过后的文件</b></font>"
	}
	boxObj.onmouseout=function(){
    //innerText:操作内部的文本，任何标签只当文本处理
		this.innerText="我是Div原来的文字"
	}
</script>

<div id="box">
	<span id="myspan">
		<p>我是span的内容</p>
	</span>
</div>
<script type="text/javascript">
	var myspanobj=document.getElementById("myspan");//dom
	console.log(myspanobj.innerHTML)
	console.log(myspanobj.outerHTML)
	myspanobj.outerHTML="<article id='new'></article>"//outerHTML修改
	document.getElementById("new").innerHTML="<b>修改内容</b>"
</script>

4.操作表单值

Document.formname.elementname.value=…
Document.forms[0]. Elementname.value=…
Document.forms[0].Element[num].value=… //elements不用改变，照实写即可

示例：

function show(){
    
//var answer=document.reg.answer.value;//表单递进式寻址
//var answer=document.forms[0].answer.value;
var answer=document.getElementsByTagName("input")[3].value;
		console.log(answer)
	}

5.操作样式

内嵌样式：

obj.style.textDecoration="none";
obj.style.fontSize="14";
obj.style.color="#000";
操作多个样式用

样式名：

Obj.className=”stylename”
Obj.className=”style1 style2”
Obj.className=””//清空类
以上三点的操作，需要将标记(obj)转成对象

classsList[重要]

obj.classList.add(“样式名”)//add添加
obj.classList.remove(“样式名”)//remove删除
obj.classList.toggle(“样式名”)//toggle切换
obj.classList.contains(“样式名”)//contains()方法用于查找指定的节点是否为给定节点的后代。此后代可以是孩子，孙子，曾孙等。

内嵌样式示例：

<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	* {
    
		margin: 0;
		padding: 0;
	}

	.pic {
    
		width: 400px;
		height: 260px;
		margin: 50px auto 20px;
		border: 1px solid #ccc;
		position: relative;
	}
	.pic img {
    
		display: block;
		width: 400px;
		height: 260px;
	}
	.pic .mask {
    
		width: 400px;
		height: 260px;
		background-color: #000;
		opacity: .8;
		position: absolute;
		left: 0;
		top: 0;
	}
	.btn {
    
		width: 400px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		background-color: #666;
		margin: 0 auto;
		cursor: pointer;
	}
</style>
</head>
<body>
	<div id="pic" class="pic">
		<p class="mask" id="mask"></p>
		<img src="img/house.jpg" alt="">
	</div>
	<div id="btn" class="btn" onclick="change()">
		开
	</div>
	<script type="text/javascript">
		var num=0;
		function change(){
    
			var maskobj=document.getElementById("mask");
			var btnobj=document.getElementById("btn");
			num++;
			if(num%2==1){
    
				console.log(num)
				maskobj.style.opacity="0";
				this.innerHTML="关";
			}else{
    
				maskobj.style.opacity=".8";
				this.innerHTML="开";
			}
		}
		</script>
	</body>

样式类名示例：

<style type="text/css">
	*{
    
		margin: 0;
		padding: 0;
	}
	.box {
    
		width: 600px;
		line-height: 21px;
		font-size: 14px;
		margin: 10px auto;
	}
	.box p {
    
		text-indent: 28px;
	}
	#btn {
      
		width: 600px;
		height: 30px;
	}	
	#btn {
      
		cursor: pointer;
	}
	/* js要用样式 */
	.up {
    
		background: url(img/up.gif) center 2px no-repeat;
	}
	.down {
    
		background: url(img/down.gif) center 2px no-repeat;
	}
	.block {
    
		display: block;
	}
	.none {
    
		display: none;
	}
</style>
<div class="box">
	<p id="one">
	作为全国首个互联网+智慧景区和无现金景区，龙门石窟在景区设置上确实费了
	一些心思。作为中国四大石窟之一，始建于北魏时的龙门石窟又有何属于自身的
	特点？以“西山石窟—东山石窟—香山寺—白居易墓园”为游览顺序，龙门石窟依水
	而建，峭壁上的石窟遗存了魏风唐韵，密密麻麻的石窟造像，但却也是所去的石
	窟中损失破坏最为严重的石窟。
	</p>
	<p id="two" class="none">
清明上河园是中国著名八朝古都河南开封的一座大型历史文化主题公园，占地600余
亩，坐落在开封城风光秀丽的龙亭湖西岸。它是依照北宋著名画家张择端的传世之作
《清明上河图》为蓝本建造的，于1998年10月28日正式对外开放。
	</p>
	<p id="btn" class="down" onclick="change()"></p>
</div>
<script type="text/javascript">
var btn=document.getElementById("btn")
	btn.onclick=function() {
    
		var two=document.getElementById("two");
		if(this.className=="down") {
    
			this.className="up"
			two.className="block"
		}else {
    
			this.className="down"
			two.className="none"
		}
	}
</script>

classsList示例：

<style type="text/css">
	*{
    
		margin: 0;
		padding: 0;
	}
	.box {
    
		width: 600px;
		line-height: 21px;
		font-size: 14px;
		margin: 10px auto;
	}
	.box p {
    
		text-indent: 28px;
	}
	#btn {
      
		width: 600px;
		height: 30px;
	}	
	#btn {
      
		cursor: pointer;
	}
	/* js要用样式 */
	.up {
    
		background: url(img/up.gif) center 2px no-repeat;
	}
	.down {
    
		background: url(img/down.gif) center 2px no-repeat;
	}
	.block {
    
		display: block;
	}
	.none {
    
		display: none;
	}
</style>
<div class="box">
	<p id="one">
		作为全国首个互联网+智慧景区和无现金景区，龙门石窟在景区设置上确实费了
	一些心思。作为中国四大石窟之一，始建于北魏时的龙门石窟又有何属于自身的
	特点？以“西山石窟—东山石窟—香山寺—白居易墓园”为游览顺序，龙门石窟依水
	而建，峭壁上的石窟遗存了魏风唐韵，密密麻麻的石窟造像，但却也是所去的石
	窟中损失破坏最为严重的石窟。
	</p>
	<p id="two" class="none">
		清明上河园是中国著名八朝古都河南开封的一座大型历史文化主题公园，占地600余
亩，坐落在开封城风光秀丽的龙亭湖西岸。它是依照北宋著名画家张择端的传世之作
《清明上河图》为蓝本建造的，于1998年10月28日正式对外开放。
	</p>
	<p id="btn" class="down" onclick="change()"></p>
</div>
<script type="text/javascript">
var btn=document.getElementById("btn")
	btn.onclick=function() {
    
		var two=document.getElementById("two");
		console.log(two.classList.contains("none"));//查询是否有类名none,返回值为布尔值
		if(this.className=="down") {
    
			this.className="up"
			two.classList.remove("none");//移除none
			two.classList.add("block");//添加block
		}else {
    
			this.className="down"
			two.classList.toggle("none");//类名切换为none
		}
	}
</script>

三.转成对象的几种形式

通过标记名（找多个）、ID（唯一）、name(多个)
Document中找到对象的三个方法

  1. Var objs=document.getElementsByTagName(“div”);
    getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。
    例如：var obj=document.getElementsByTagName(“p”); //数组

  2. Var objs=document.getElementById(“one”);
    获取的是拥有唯一的ID名称的DOM元素
    例如：var obj=document.getElementsById(“one”);
    Alert(obj.innerHtml)

  3. Var objs=document.getElementsByName(“two”) //数组
    getElementsByName() 方法可返回带有指定名称的对象的集合

四.找到DOM的方法

1:ID              document.getElementById("ID名");
2:name           document.form1.user.value;        (表单)
					  document.forms[0].input[0].value
                document.getElementsByName("name名")
3:TAG            document.getElementsByTagName("标签名");
4:class            document.getElementsByClassName("类名");
5:querSelector/querSelectionAll
querSelector：获取选中元素中的第一个。
querSelectionAll：获取选中的所有元素。

五.DOM元素方法列表

在这里插入图片描述

六.DOM元素事件分类

鼠标事件、键盘事件、框架/对象（Frame/Object）事件、表单事件、剪切板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件、其他事件。

说明：
根据前面的DOM树形结构需要知道。
在这里插入图片描述
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点 。

以上就是一些简单对DOM的理解。

原网站

版权声明
本文为[子慕拾]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_71187097/article/details/126105090

边栏推荐

猜你喜欢

随机推荐