javaScript的DOM操作

最新推荐文章于 2018-04-14 23:57:42 发布

孤独的看着星星流泪

最新推荐文章于 2018-04-14 23:57:42 发布

阅读量126

点赞数

分类专栏： html javaScript 文章标签： JS DOM

本文链接：https://blog.csdn.net/qq_24832821/article/details/79850116

版权

html 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

javaScript

9 篇文章 0 订阅

订阅专栏

JavaScript的DOM操作

什么是DOM？

如下图解

Document:整个html文件都成为一个document文档

Element:所有的标签都是Element元素

Attribute：标签里面的属性

Text：标签中间夹着的内容为text文本

Node:document、element、attribute、text统称为节点node.

1、 Document对象

getElementsByName()
getElementsByTagName()

这两个方法获取之后需要遍历！

以下两个方法很重要，但是在手册中查不到！

创建文本节点：document.createTextNode()

创建元素节点：document.createElement()

2、Element对象

我们所认知的html页面中所有的标签都是element元素

element.appendChild()	向元素添加新的子节点，作为最后一个子节点。
element.firstChild	返回元素的首个子节点。
element.getAttribute()	返回元素节点的指定属性值。
element.innerHTML	设置或返回元素的内容。
element.insertBefore()	在指定的已有的子节点之前插入新节点。
element.lastChild	返回元素的最后一个子元素。
element.setAttribute()	把指定属性设置或更改为指定值。
element.removeChild()	从元素中移除子节点。
element.replaceChild()	替换元素中的子节点。

3、Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

4、DOM中对appendChild()方法的运用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态添加城市</title>
		<script>
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					//1.获取ul元素节点
					var ulEle = document.getElementById("ul1");
					//2.创建城市文本节点
					var textNode = document.createTextNode("深圳");//深圳
					//3.创建li元素节点
					var liEle = document.createElement("li");//<li></li>
					//4.将城市文本节点添加到li元素节点中去
					liEle.appendChild(textNode);//<li>深圳</li>
					//5.将li添加到ul中去
					ulEle.appendChild(liEle);
				}
			}
		</script>		
	</head>

	<body>
		<input type="button" value="添加新城市" id="btn"/>
		<ul id="ul1">
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
		</ul>
	</body>
</html>

孤独的看着星星流泪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript的DOM操作

JavaScript的DOM操作什么是DOM？如下图解Document:整个html文件都成为一个document文档Element:所有的标签都是Element元素Attribute：标签里面的属性Text：标签中间夹着的内容为text文本Node:document、element、attribute、text统称为节点node.1、 Document对象getElementsByName()...
复制链接

扫一扫