DOM对象

最新推荐文章于 2023-05-12 19:23:06 发布

云夕々

最新推荐文章于 2023-05-12 19:23:06 发布

阅读量541

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/k010107/article/details/126857494

版权

一、DOM的分类

核心DOM：指提供了操作HTML和XML文档的各种属性，定义一些公共的属性和方法
XML DOM：指针对XML操作的接口，也是一些属性和方法
HTML DOM：指针对HTML文档操作的接口，也是一些属性和方法
Event DOM：指事件对象模型，提供一些常用的事件
CSS DOM：指让js去操作和访问CSS的各种属性

二、Document对象

title属性：操作当前文档的标题

	function getTitle(){
		alert(document.title);
	}
	function setTitle(){
		document.title="标题";
	}

URL属性：返回当前文档的URL

	function func(){
		alert(document.URL);
	}

write()方法：向文档写文本、HTML表达式或JavaScript代码

	document.write("前端程序员<br />");

三、DOM的节点操作

1、整个文档是一个文档节点（Document）
2、每个HTML标签是一个元素节点（Element）
3、包含在HTML元素中的文本是文本节点（Text）是指最底层的节点，下面不能再有其它子节点
4、每个HTML属性是一个属性节点（Attribute）是指元素中所有的属性构成的节点列表，一个标记有多个属性

一个HTML文档只有一个根元素，就是<html>标记
父节点：指当前节点的上一级元素
子节点：指当前节点的下一级元素
兄弟节点：指相邻的两个节点，同属于一个父节点
如：<html>
			<head>
					<title>文档标题</title>
			</head>
			<body>
					<h1>我的标题</h1>
					<a href="https://blog.csdn.net/k010107?type=blog">我的博客链接</a>
			</body>
	</html>

5、CSS属性值和DOM的style属性值之间的映射

在这里插入图片描述

小结

节点操作：访问、属性、创建
1、节点的访问：firstChild、lastChild、childNodes、parentChild（父子节）
可以使元素对象的方法进行替换：getElementByld()、getElementsByTagName()
2、节点属性的操作：setAttribute()、removeAttribute()、getAttribute()
3、节点的创建、删除、追加：
创建节点：document.createElement(tagName)
复制节点：A.cloneNode(true/false)；复制A节点(true完全复制false节点自身)
删除节点(注：必须父节点下的子节点才能被删除)：parentObj.removeChild(nodeObj)；
追加节点：parentObj.appendChild(nodeObj)；
插入节点：parentObj.insertBefore(new,current)；
兄弟节点
上一个兄弟节点：previousElementSibling
下一个兄弟节点：nextElementSibling
第一个兄弟节点：firstNode
最后一个兄弟节点：lastNode
补充：元素对象的属性
tagName：取一个标记的名称，同nodeName一样；
innerHTML：指标记对中的HTML文本(含有HTML标记的文本)，一般指双边标记；
style：对应HTML标记的style属性；
id：对应HTML标记的id属性；
在这里插入图片描述

云夕々

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM对象

核心DOM：指提供了操作HTML和XML文档的各种属性，定义一些公共的属性和方法；XML DOM：指针对XML操作的接口，也是一些属性和方法；HTML DOM：指针对HTML文档操作的接口，也是一些属性和方法；Event DOM：指事件对象模型，提供一些常用的事件；CSS DOM：指让js去操作和访问CSS的各种属性
复制链接

扫一扫