JS基础-DOM Document对象

时间 2019-12-10

原文原文链接

DOM 节点

节点(Node)	释义	对象
文档节点	整个文档	Document 对象
元素节点	每一个HTML元素	Eelement 对象
文本节点	HTML元素内的文本	Text 对象
属性节点	每一个HTML的属性	Attribute 对象
注释节点	文档的注释内容	Comment 对象

Attributes属性节点

属性	释义
nodeType	节点类型
nodeValue	节点值
nodeName	节点名称
innerHTML	节点(元素)的文本值

导航属性

属性	释义
parentNode	节点(元素)的父节点
firstChild	节点下第一个子元素
lastChild	节点下最后一个子元素
childNodes	节点(元素)的子节点

Document 对象方法

方法	描述
open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
write()	向文档写 HTML 表达式或 JavaScript 代码。
writeln()	等同于 write() 方法，不一样的是在每一个表达式以后写一个换行符。
getElementById()	获取指定 Id 的对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
getElementsByClassName()	获取指定 Class 的对象的引用。

document.getElementByID()

获取指定 Id 的对象的引用html

<p id="p1">this is p1</p>

<script>
	var ele=document.getElementById("p1");		//获取全部指定类名的元素
	console.log(ele.nodeName);					//节点名称
	console.log(ele.nodeType);					//节点类型
	console.log(ele.nodeValue);					//节点值
	console.log(ele.innerHTML);					//节点文本信息
</script>

P
1
null
this is p1

document.getElementsByClassName()

获取指定 Class 的对象的引用node

节点属性

<p class="p1">this is p1</p>

<script>
	var ele=document.getElementsByClassName("p1")[0];	//获取全部指定类名的第一个元素
	console.log(ele.nodeName);							//节点名称
	console.log(ele.nodeType);							//节点类型
	console.log(ele.nodeValue);							//节点值
	console.log(ele.innerHTML);							//节点文本信息
</script>

P
1
null
this is p1

导航属性

<div class="div1">
	<p class="p1"></p><p class="p2">this is <span>p2</span></br></p><p class="p3"></p>
</div>

<script>
	var ele=document.getElementsByClassName("p2")[0];	//获取全部指定类名的第一个元素
	console.log(ele.parentNode);						//节点元素的父节点
	console.log(ele.children);							//全部子标签
	console.log(ele.firstChild);						//文档的首个子节点
	console.log(ele.firstElementChild);					//节点下第一个子元素
	console.log(ele.lastElementChild);					//节点下最后一个子元素
	console.log(ele.childNodes);						//节点(元素)的子节点
	console.log(ele.nextSibling);						//返回指定节点以后紧跟的节点
	console.log(ele.nextElementSibling);				//下一个兄弟标签元素
	console.log(ele.previousElementSibling);			//上一个兄弟标签元素
</script>

<div class="div1">…</div>
HTMLCollection(2) [span, br]
"this is "
<span>p2</span>
<br>
NodeList(3) [text, span, br]
<p class="p3"></p>
<p class="p3"></p>
<p class="p1"></p>

绑定事件

绑定事件的两种不一样格式，【this】特指标签自己属性this

<!DOCTYPE html>
<html>
<head></head>
<body>

<p onclick="func(this)">This is function 1</p>
<div>This is function 2</div>

<script>
	//方法一：
	function func(self){
		//显示当前标签
		alert('打印标签自己属性：' + self);
	}	

	//方法二：
	var ele=document.getElementsByTagName("div")[0];
	ele.onclick=function(){
		//显示当前标签
		alert('打印标签自己属性：' + this);
	}
</script>

</body>
</html>