DOM-Node

最新推荐文章于 2022-06-29 13:06:09 发布

我叫李白兔

最新推荐文章于 2022-06-29 13:06:09 发布

阅读量186

点赞数 1

文章标签： javascript dom api

本文链接：https://blog.csdn.net/weixin_42412179/article/details/108123624

版权

DOM
文档对象模型，浏览器提供了一系列api，通过此api进行dom操作
DOM的体系结构
object > node > Element/Document/Comment/Text
通过下方代码进行举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>node</title>
	<style type="text/css">
		*{
			margin: 0px;
		}
		#app{
			border: 1px solid pink;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="app" class="container app">
		你好
		<form name="biaodan"></form>
		<div class="head" ></div>
		<div class="content">
			<ul>
				<li>one</li>
				<li>two</li>
				<li>three</li>
			</ul>
		</div>
		<!-- 底部 -->
		<div class="footer"></div>
	</div>
	<script type="text/javascript"></script>
</body>
</html>

node
节点元素，在html中所有的标签都可以被称为节点，例如：< div >、< !-- -->等
1.实例化
浏览器在加载HTML的时候已经完成了节点的实例化，我们只需要通过document.xxx方法获取即可
2.属性
1)节点特性的属性

	node.prototype.nodeType
	Element元素节点的返回值为1
	Text文本节点的返回值为3
	Comment注释节点的返回值为8
	Document文档节点的返回值为9

在这里插入图片描述

	node.prototype.nodeValue
	Element元素节点的返回值为null
	Document文档节点的返回值为null
	Text文本节点的返回值为文本内容
	Comment注释节点的返回值为注释中的内容

在这里插入图片描述

	node.prototype.nodeName
	Element元素节点的返回值为元素大写的标签名
	Doument文档节点的返回值为#document
	Comment注释节点的返回值为#comment
	Text文本节点的返回值为#text

在这里插入图片描述 2）层次关系的属性

	node.prototype.childNodes
	返回所有的子节点

在这里插入图片描述

	node.prototype.firstChild
	返回第一个子节点

在这里插入图片描述

	node.prototype.lastChild
	返回最后一个子节点

在这里插入图片描述

	node.prototype.nextSibling
	返回下一个兄弟节点
	node.prototype.previousSibling
	返回上一个兄弟节点
	node.prototype.parentNode
	返回父节点
	node.prototype.parentElement
	返回父元素

在这里插入图片描述

	node.prototype.contentText
	返回一个节点及其后代的文本内容

在这里插入图片描述 3.方法

	node.prototype.append()
	添加子节点

在这里插入图片描述

	node.prototype.insertBefore(newNode,refNode)
	在refNode之前添加newNode

在这里插入图片描述

	node.prototype.replaceChild(newNode,refNode)
	将refNode替换为newNode

在这里插入图片描述

	node.prototype.removeChild()
	移除子节点

在这里插入图片描述

	node.prototype.cloneNode(deep)
	克隆
	若deep的值为true，则该节点的所有后代节点也都会被克隆，若deep的值为false，则只克隆该节点。参数默认为false

在这里插入图片描述

	node.prototype.hasAttribute(属性名)
	判断是否有属性名为xxx的属性，返回值为Boolean

在这里插入图片描述

我叫李白兔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM-Node

DOM文档对象模型，浏览器提供了一系列api，通过此api进行dom操作1.体系结构object > node > Element/Document/Comment/Text通过下方代码进行举例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>node</title> <style type="text/css"&
复制链接

扫一扫

DOM-Node

“相关推荐”对你有帮助么？