1.讲解document对象

本章节讲的是document DOM对象：
首先来了解下什么是document以及DOM：

Attention：

首先来说一下这个document对象（通俗讲就是窗口文档对象），一个html文档就是一个窗口文档对象
	document属于window对象下的一个子对象，所以你会发现使用DOM时，基本上不需要使用window.document

1.1DOM的含义

DOM(document object Model)文档对象模型

1.2学习JS DOM中

1、activeElement：获得当前焦点元素

	var x = document.activeElement.tagName;

2、addEventListener：添加监听事件

获取元素-->为元素添加监听事件-->x.addEventListener("click",function(){})
可以添加多个事件，不影响，事件会按照设置先后顺序实现
removeEventListener:移除事件

3、adoptNode():可以截取源文档的内容，但是会将源文档的内容给提取掉

<body>
		<iframe src="links.html"id="text"></iframe>
		<p onclick="my()">点击</p>
	</body>
	<script>
		function my() {
			var x = document.getElementById('text');
			var h = x.contentWindow.document.getElementsByTagName("p")[0];
			var z = document.adoptNode(h);
			document.body.appendChild(z);
		};
		
	</script>

在这里插入图片描述

注意iframe中的内容，点击后效果不一样
点击p中的my（）函数

在这里插入图片描述

4、attributes：返回标签的属性加上lenght的话可以返回属性个数

```
<body>
	<p id="one" onclick="my()">这是一段文本</p>
</body>

<script>
	//获取标签
	var x = document.getElementsByTagName('p')[0];
	document.write(x.attributes.length);//输出2  -->id onclick
</script>
```

5、anchors：返回文档中超链接（需要name属性哦）的数量

<body>
    <p>1、anchors返回文档锚点个数</p>
    <a name="11222">what</a>
    <a name="111"></a>
    <a name="#"></a>
    <a name="#"></a>
    <a name="#"></a>
	<a href=""></a>
    <p>锚点个数：</p>
    
	
</body>
<script>
    document.write(document.anchors.length);//输出5
    document.write(document.anchors[1].innerHTML);//what
</script>

6、baseURL:返回文档URL地址

直接document.baseURl()

7、body用于设置或者返回文档

```
docuement.body.style.background="red"//设置文档背景为红色

docuement.bodu.innerHTML//返回文档内容
```

8、close和open分别表示关闭和开启文档流


<script>
function createDoc(){
	var doc=document.open("text/html","replace");
	var txt="<!DOCTYPE html><html><body>学习 HTML DOM 很有趣!</body></html>";
	doc.write(txt);
	doc.close();
}
</script>
</head>

<body>
<input type="button" value="新文档" onclick="createDoc()">
</body>

9、返回该文档的有关cookie内容

document.write(document.cookie)

10、createAttribute：为标签创建class或者id；创建了一定不要忘记添加 setAttributeNode()

<style type="text/css">
.democlass{
	color:red;
}
</style>
</head>
<body>

<h1>Hello World</h1>
<p id="demo">单击按钮来创建一个“类”属性值“democlass”插入到上面的H1元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var h1=document.getElementsByTagName("H1")[0];
	var att=document.createAttribute("class");
	att.value="democlass";
	h1.setAttributeNode(att);
}
</script>

11、creatConment：创建文档注释，但是我们看不见哦，只能在浏览器查看 12、createDocumentFragment()

重点哦！！改方法可以问页面创建一个虚拟节点
可以实现对文档的复制、粘贴、新增；对于文档的渲染功能可以得到提升
createDocumentFragment和createElement的区别：
首先，createDocumentFragment能够减少浏览器渲染的复合，建立虚拟节点，一次性将所有节点载入文档
而对于，createElement来说，是添加一个往文档中添加，增加了浏览器辅导负担。

createElement创建效果：

<body>
		<ul></ul>
	</body>
	<script>
		let x = document.getElementsByTagName('ul')[0];
		let i  =0;
		let j = 20;
		
		for(i;i<j;i++) {
			var li = document.createElement('lii');
			li.innerHTML = "第"+i+"个li<br>";
			x.appendChild(li);
		}

createDocumentFragment创建效果：‘

<body>
		<ul></ul>
	</body>
	<script>
		let x = document.getElementsByTagName('ul')[0];
		let i  =0;
		let j = 20;
		
		let fragname = document.createDocumentFragment();
		for(i;i<j;++i) {
			let li = document.createElement('li');
			fragname.appendChild(li);
		}
		x.appendChild(fragname);
		
		
	</script>

	for(i;i<j;++i) {
		let li = document.createElement('li');
		fragname.appendChild(li);
	}
	x.appendChild(fragname);
	
	
</script>


相同的效果，为了提升渲染效率建议使用createDocumentFragment

JSDOM笔记总结

JSDOM对象讲解

1.讲解document对象

1.1DOM的含义

1.2学习JS DOM中

猜你喜欢