DOM和DOM选择，创建元素

DOM（Document Object Model）：DOM定义了表示和修改文档所需要的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准接口编程。

DOM不能操作css样式表，但是能通过间接设置行间样式来操作css

DOM选择元素的几种方式：

标签选择

var div document.getElementsByTagName('div')[0];

选择出来的是类数组，记得要加数组 [ x ] ，

点击一下

改变标签的class：xxx.className = 'xxxx';

ID选择：

元素id在ie8以下的浏览器不区分大小写，也会匹配和id相同字段的name属性

var only = document.getElementById('only');

class选择方式：

var only = document.getElementsByClassName('only')[0];

但是ie8和ie8以下的浏览器根本就没有这种方法，所以没有tagName常用

Name方法：

var fruit = document.getElementsByName('fruit')[0];

需注意，只有部分标签元素name可生效（表单，表单元素，img，iframe），虽然现在高版本的浏览器可以识别div中的name，但是没有什么作用

querySelector方法

var strong = document.querySelector('div > span strong');

var strong = document.querySelectorAll('div > span strong');

里面可以填写和css选择器一样的方法

All是一组

缺点：在Ie7以及ie7以下没有，而且不是实时的

比如，你选择一个div组，然后再把一个div删掉，query里面还是原来的内容

看一道题目：

封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>VVVGG</title>
	<link rel="stylesheet" type="text/css" href="lesson1.css">
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
	</style>
</head>
<body>
	<div>
		<strong></strong>
		<span></span>
		<i></i>
		<p></p>
		<em></em>
		<del></del>
	</div>
</body>
<script type="text/javascript" charset="utf-8">
	var i = document.getElementsByTagName('i')[0];
	function bother(e, n) {
		while(n && e) {
			if(n > 0) {
				if(e.nextElementSibling) {
					e = e.nextElementSibling;
				}else {
					e = e.nextSibling;
					while(e&&e.nodeType != 1) {
						e = e.nextSibling;
					}
				}
				n--;
			}else {
				if(e.previousElementSibling) {
					e = e.previousElementSibling;
				}else {
					e = e.previousSibling;
					while(e&&e.nodeType != 1) {
						e = e.previousSibling;
					}
				}
				n++;
			}
		}
		return e;
	}
	console.log(bother(i,5));
</script>
</html>

DOM创建节点的方式：

1，创建元素节点：

var div = document.createElement('div');
document.body.appendChild(div);

模拟一下按住键盘上的上下左右方向键，div能够移动

var div = document.createElement('div');
document.body.appendChild(div);
div.style.width = '100px';
div.style.height = '100px';
div.style.backgroundColor = 'red';
div.style.position = 'absolute';
div.style.left = '0px';
div.style.top = '0px';
var speed = 5;
document.onkeydown = function (e) {
	switch(e.which){
		case 38 : 
			 div.style.top = parseInt(div.style.top) - 5 + 'px';
			 break;
		case 39 : 
			 div.style.left = parseInt(div.style.left) + 5 + 'px';
			 break;
		case 40 : 
			 div.style.top = parseInt(div.style.top) + 5 + 'px';
			 break;
		case 37 : 
			 div.style.left = parseInt(div.style.left) - 5 + 'px';
			 break;
	}
}

查看按键属性（which：xxx）

实现一个画图的画板：

一共400个，tab一下就可以

2，document.createTextNode();

创建文本节点

3，document.createComment();

创建注释节点

4，document.createDocumentFragment();

创建文档碎片节点

document插入节点的方式：

1，appendChild();

任何一个元素节点都有这个appendChild，相当于数组的push函数

所以appendChild是一个剪切操作，把页面中没有的元素插入进去没什么好说的，把页面中已经有的元素，从一个地方剪切到另一个地方

2，insertBefore(a, b);

使用方法：

ParentNode.insertBefore(a, b);

意思就是在父级节点ParentNode中，在b节点之前插入a节点

document中删除节点的操作：

1，parent.removeChild();

父节点调用，把子节点删除，返回要删除的节点

2，child.remove();

节点调用，删除自己，完全销毁

document中的替换操作：

parentNode.replaceChild(new, origin);

父节点调用，拿new节点，替换origin子节点

Element节点上的一些属性：

1，innerHtml：

可以调用，可以赋值

也可以放入html结构

2，innerText

Element节点的一些方法：

setAttribute

getAttribute

统计一下，你点击了多少次的a标签

data-log是人为设置的一个属性，并没有什么其他的意义，就是用来统计用户点击了这个a标签多少次

我们每点一次a标签，出现0的次数就加1

给定标签，添加特定的属性：

再看一道题目：

请编写一段JavaScript脚本生成下面这段DOM结构。要求：使用标准的DOM方法或属性。

</div>

提示：dom.className可以读写class

题目：

封装函数insertAfter();功能类似insertBefore();

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>VVVGG</title>
	<link rel="stylesheet" type="text/css" href="lesson1.css">
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
	</style>
</head>
<body>
	<div>
		<p></p>
		<span></span>
		<i></i>
	</div>
</body>
<script type="text/javascript" charset="utf-8">
	var div = document.getElementsByTagName('div')[0];
	var span = document.getElementsByTagName('span')[0];
	var strong = document.createElement('strong');
	Element.prototype.insertAfter = function (a, b) {
		var num = this.children.length;
		var j = 0;
		for(var i = 0; i < num; i ++) {
			if(this.children[i].nodeName == b.nodeName) {
				j = i + 1;
				break;
			}
		}
		this.insertBefore(a, this.children[j]);
	}
	div.insertAfter(strong,span);
</script>
</html>

将目标节点内部的节点顺序逆序

eg：<div><a></a><em></em></div>

DOM和DOM选择，创建元素

猜你喜欢