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 class="example">
<p class="slogan">xxxx</p>
</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>
<div><em></em><a></a></div>