dom 继承树 dom基本操作（上）

最新推荐文章于 2022-02-23 13:24:30 发布

小白追梦

最新推荐文章于 2022-02-23 13:24:30 发布

阅读量95

点赞数

分类专栏： JS dom 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/106227239

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

dom

5 篇文章 0 订阅

订阅专栏

1、让JS 操作HTML 和 XML 的接口
任何元素都有 nodeType
记住 1元素节点 3文本节点 8注释节点 9 文档节点 document
基于元素节点树遍历 children 可用其他的如 parentElement firstElementChild lastElementChild ie9以下用不了

2、在这里插入图片描述
document 继承自 HTMLDocument.prototype 继承自 Document.prototype

3、 dom 基本操作
1） getElementByid方法定义在Document.prototype上
2） getElementByName 方法定义在HTMLDocument.prototype上
3）getElementsByTagName方法定义在Document.prototype和Element.prototype上

在这里插入图片描述

document.body 就是标签
document.head 就是标签
在这里插入图片描述

4、document.documentElement 表示的是 HTML 特殊记录
在这里插入图片描述

5、增在这里插入图片描述

<!DOCTYPE html>
<html lang = "en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>
</head>
<body>
		<script type="text/javascript">
			var  div = document.createElement("div");

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

在这里插入图片描述

6、插
appendChild （剪切操作）和 .push 一个意思

<body>       <div></div>
		<script type="text/javascript">
			
			 

			var div = document.getElementsByTagName("div")[0];
			var text = document.createTextNode("吴宝宝");
			var span = document.createElement("span");
			div.appendChild(text);
			div.appendChild(span);
			var text1 = document.createTextNode("demo");
			span.appendChild(text1);
 
		</script>
</body>

解释一下
在这里插入图片描述
实现的效果如图

7、替换使用的不多
parent.replaceChild(new , origin);

最常用增 document.creatElement();
插 div.appendChild(); div 可以是其他的标签
div.insertBofore(a, b)
删除 p.remove();
child.remove();

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom 继承树 dom基本操作（上）

1、让JS 操作HTML 和 XML 的接口任何元素都有 nodeType记住 1元素节点 3文本节点 8注释节点 9 文档节点 document基于元素节点树遍历 children 可用其他的如 parentElement firstElementChild lastElementChild ie9以下用不了2、document 继承自 HTMLDocument.prototype 继承自 Document.prototype
复制链接

扫一扫