前端js元素的写入和读取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			哈哈哈 你说啥
			我听不见
			
			切~~~~~
			
			<p style="visibility: hidden;">这是一个段落标签</p>
			<!--注释 换种方式隐藏-->
			<h1 style="display: none;">这是一个大标题</h1>
		</div>
	</body>
</html>
<script type="text/javascript">
	/*
	 1.innerHTML innerText
	 以上适用于双标签,div,p,h1;既可以读取文本内容,也可以把文本写入到标签中
	 2.value 
	 适用于form表单 例如 input select等 既可以读取也可以写入
	 
	 
	 其他区别:
	 a.innerHTML 获取元素节点里的内容  包括文本结点 元素节点 注释节点并且保留空格
	 b.innerText 获取元素节点里的文本结点 忽略空格 不会显示隐藏元素的内容
	 ctextContent 获取元素节点中的文本结点 保留空格 会显示隐藏元素的的文本
	 
	*/
	var div=document.querySelector("div");
	console.log(div.innerHTML);
	console.log(div.innerText);
	console.log(div.textContent);
</script>

运行结果:

前端三剑客
#JS
前端js元素的写入和读取
http://ultracode.cn/2020/11/19/JS/前端js元素的写入和读取/
作者
Win
发布于
2020年11月19日
许可协议