DOM-Node

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
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值