DOM
1.DOM操作演示
Document Object Model
插件emmet学习
DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml功能的一类对象的集合(不能修改CSS样式表,可以改变行间样式,即通过改变html间接修改css)。也有人称DOM是对HTML以及XML的标准编程接口。
demo案例
项目1:实现点击一下发生变化
var div = document.getElementsByTagName('div')[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
div.onclick = function(){
this.style.backgroundColor = 'green';
this.style.width = "200px";
this.style.height = "50px";
this.style.borderRadius = "50%";
}
项目2:实现点击变色
var div = document.getElementsByTagName('div')[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
var count = 0;
div.onclick = function(){
count++;
if(count % 2 == 1){
this.style.backgroundColor = "green";
}else{
this.style.backgroundColor = 'red';
}
}
一定要多练,编程思想
项目3:实现选项卡
<!DOCTYPE html>
<html>
<head>
<title>finish js</title>
<style>
.content{
display: none;
width: 200px;
height:200px;
border:2px solid red;
}
.active{
background-color: yellow;
}
/*注意权重*/
</style>
</head>
<body>
<div class="wrapper">
<button class="active">111</button>
<button>222</button>
<button>333</button>
<div class="content" style="display: block">111</div>
<div class="content">邓哥...2222</div>
<div class="content">3333</div>
</div>
<script>
var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');
for(var i = 0; i < btn.length; i++){
(function (n) {
btn[n].onclick = function (){
for(var j = 0; j < btn.length; j++){
btn[j].className = "";
div[j].style.display = "none";
}
this.className = "active";
div[n].style.display = "block";
}
}(i))//立即执行函数,防止I互相污染
}
</script>
</body>
</html>
项目4:实现木块运动停止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
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 = "0";
div.style.top = "0";
var speed = 1;
var timer = setInterval(function(){
speed += speed/7;
div.style.left = parseInt(div.style.left) + speed + "px";
div.style.top = parseInt(div.style.top) + speed + "px";
if(parseInt(div.style.top) > 200 && parseInt(div.style.left) > 200){
clearInterval(timer);
}
},50);
</script>
</body>
</html>
项目5.实现俄罗斯方块基础
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 = "0";
div.style.top = "0";
document.onkeydown = function(e){
switch(e.which) {
case 38:
div.style.top = parseInt(div.style.top) - 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;
case 39:
div.style.left = parseInt(div.style.left) + 5 + "px";
break;
}
}
项目6.实现按住方向键,加速(待做——js运动)
项目7.实现点击加速,改变左右键移动速度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button style="width:100px;height:50px;
background:linear-gradient(to left, #999, #000, #432,#fcc);
position: fixed;right:0;
top:50%;text-align:center;line-height:50px;color:#fff;font-famliy:arial;">加速</button>
<script>
var btn = document.getElementsByTagName('button')[0];
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 = "0";
div.style.top = "0";
var speed = 5;
btn.onclick = function(){
speed++;
}
document.onkeydown = function(e){
switch(e.which) {
case 38:
div.style.top = parseInt(div.style.top) - speed + "px";
break;
case 40:
div.style.top = parseInt(div.style.top) + speed + "px";
break;
case 37:
div.style.left = parseInt(div.style.left) - speed + "px";
break;
case 39:
div.style.left = parseInt(div.style.left) + speed + "px";
break;
}
}
</script>
</body>
</html>
项目8:扫雷项目基础:刮奖效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
box-sizing: border-box;/*盒模型合理展示*/
float: left;
width: 10px;
height: 10px;
/*border: 1px solid black;*/
}
ul{
list-style: none;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<ul>
<li img-date = "0"></li>
<li img-date = "0"></li>
//此处省略400行li样式
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0];
ul.onmouseover = function(e){//鼠标移入触发什么
var event = e||window.event;
var target = event.target || event.srcElement;
target.style.backgroundColor = "rgb(0,255," + target.getAttribute('img-date') +")";
target.setAttribute('img-date', parseInt(target.getAttribute('img-date'))+ 6);
}
</script>
</body>
</html>
高级轮播图
H5 C3高级动画
2.对节点的增删改查
(1)查看节点
document代表整个文档(是一个对象):位于html标签上层的
document的方法:IE不支持说的是IE9及以下
document.getElementById() | 元素id 在Ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素 |
---|---|
getElementsByTagName() | 标签名放在类数组里面 |
getElementByName(); | 只有部分标签name可生效(表单,表单元素,img,iframe) |
getElementsByClassName() | 类名 -> ie8和ie8以下的ie版本中没有,可以多个class一起 |
querySelector() | css选择器 在ie7和ie7以下的版本中没有 |
querySelectorAll() | css选择器 在ie7和ie7以下的版本中没有 |
页面里面所有的div拿出来——>扔到一个类数组里面去
<div></div>
<div></div>
<div></div>
<p></p>
<script>
var div = document.getElementsByTagName('div');
console.log(div.length);//放在类数组里面了
</script>
选择div里面的p
<div>
<p class="demo"></p>
</div>
<script>
var p = document.getElementsByClassName('demo')[0];
console.log(p);
</script>
开发经验:尽量不用id写东西,用class
读懂代码——布局,处理细节,居中,两栏布局, 反着布局(淘宝)
商业逻辑编程逻辑相互配合
快速实现页面搭建——实现减少加班
jQuery::实现CSS选择模式选择JS:就是识别CSS
query演示
<div>
<strong></strong>
</div>
<div>
<span>
<strong class="demo">123</strong>
</span>
</div>
<script>
var strong = document.querySelector('div>span strong.demo');//选一个
var strong1 = document.querySelectorAll('div>span strong.demo');//选一组
</script>
然而强大的querySelector()和querySelectorAll()不能用
原因:
1.在ie7和ie7以下的版本中没有
2.实时性:他们选出的不是实时的
实时的是这样:男生全占起来,一会来了一个迟到的,也算进去
<div></div>
<div class="demo"></div>
<div></div>
var div = document.getElementsByTagName('div');
var demo = document.getElementsByClassName('demo')[0];
var newDiv = document.createElement('div');
document.body.appendChild(newDiv);
querySelector不是实时性,改的是副本
<script>
var div = document.querySelectorAll('div');
var demo = document.getElementsByClassName('demo')[0];
var newDiv = document.createElement('div');
document.body.appendChild(newDiv);
</script>
var div = document.querySelectorAll('div');
(2)遍历节点树
parentNode | 父节点 (最顶端的parentNode为#document); |
---|---|
childNodes | 子节点们(直系的) |
firstChild | 第一个子节点 |
lastChild | 最后一个子节点 |
nextSibling | 后一个兄弟元素 |
previousSibling | 前一个兄弟元素 |
节点的类型
元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
parentNode演示
<div>
<strong></strong>
<span></span>
<em></em>
</div>
<script>
var strong = document.getElementsByTagName('strong')[0];
</script>
console.log(strong.parentNode);
console.log(strong.parentNode.parentNode);
console.log(strong.parentNode.parentNode.parentNode);
console.log(strong.parentNode.parentNode.parentNode.parentNode);
console.log(strong.parentNode.parentNode.parentNode.parentNode.parentNode);
childNodes 演示
<div>
<strong>
<span>1</span>
</strong>
<span></span>
<em></em>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
// 要是按照直系元素来说,应该长度为3,但是实际为7,遍历节点数(节点不一定都是html)
</script>
节点讲解demo
<div>
123sabchiabs
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
<script>
console.log(div.childNodes);//7个
</script>
nextSibling演示
<div>
123sabchiabs
<!-- this is comment -->
<strong></strong>
<span></span>
</div>
<script>
// 下一个兄弟节点,不是下一个兄弟元素节点
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nextSibling);
console.log(strong.nextSibling.nextSibling);
console.log(strong.nextSibling.nextSibling.nextSibling);
</script>
(3)遍历元素节点数
去掉乱七八糟节点
parentElement | 返回当前元素的父元素节点 (IE不兼容) |
---|---|
children | 只返回当前元素的元素子节点 |
node.childElementCount=== node.children.length | 当前元素节点的子元素节点个数(IE不兼容) |
firstElementChild | 返回的是第一个元素节点(IE不兼容) |
lastElementChild | 返回的是最后一个元素节点(IE不兼容) |
nextElementSibling / previousElementSibling | 返回后一个/前一个兄弟元素节点(IE不兼容) |
节点的四个属性
nodeName | 元素的标签名,以大写形式表示,只读 |
---|---|
nodeValue重要 | Text节点或Comment节点的文本内容,可读写 |
nodeType | 该节点的类型,只读 |
attributes | Element 节点的属性集合 |
节点的一个方法 Node.hasChildNodes()——有没有子节点(true/false)
获取节点类型 nodeType ()
案例:实现输入数据的节点数返回
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
123
<!-- This is comment -->
<strong></strong>
<span></span>
<em></em>
<i></i>
<b></b>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
function retElementChild(node) {
//no children
var temp = {
length : 0,
push : Array.prototype.push,
splice : Array.prototype.splice//实现看出来像数组
},
child = node.childNodes,
len = child.length;
for(var i = 0; i < len; i++){
if(child[i].nodeType === 1) {
temp.push(child[i]);
}
}
return temp;
}
console.log(retElementChild(div));
</script>
</body>
</html>
寒假作业:
- 笔试面试题汇总
- 摹写页面:淘宝,新浪微博,58同城
- 技术书
(4)DOM树
Document
Document返回一个函数,document代表整个页面
注意:Document是一个构造函数,但是我不能new,只允许系统new
好处:原形:Document写东西,document也适用,继承关系
构造关系:document---->HTMLDocument.prototype---->Document.prototype
所以:Document.prototype.abc可以受益到document上,且就近继承
关系:
HTMLDocument.prototype={
__proto__:Document.prototype
}
最后一列
HTMLBodyElement.prototype.abc = "demo";
var body = document.getElementsByTagName('body')[0];
var head = document.getElementsByTagName('head')[0];
console.log(head.abc);------>undefined
console.log(body.abc);------>demo
(5)DOM操作
-
getElementById方法定义在Document.prototype上,即Element节点上不能使用。
-
getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document以外不能使用(xml document,Element)
-
getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
实现选第一个span
<div>
<span></span>
</div>
<span></span>
<script>
var div = document.getElementsByTagName('div')[0];//整个文档上找element
var span = div.getElementsByTagName('span')[0];//div下面的span
</script>
通配符选择器
var div = document.getElementsByTagName('*')[0];//选择所有标签
-
HTMLDocument.prototype定义了一些常用的属性,body,head,分别指代HTML文档中的body head标签。
-
Document.prototype上定义了documentElement属性,指代文档的根元素,在HTML文档中,他总是指代html元素
-
getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义
3.课堂练习
1.遍历元素节点树,要求不能用children属性
题意1.给出父节点,遍历出子节点ChildNodes
题意2.打印树形结构:div子元素节点们,判断子元素节点是否还有子元素节点,有的话一直递归
网络参考答案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div>
<span>
<a href="" title=""></a>
</span>
</div>
<span></span>
</div>
<div>
<div>
<div>
<span></span>
</div>
</div>
</div>
<script>
var div=document.getElementsByTagName("div")
var a=[];
HTMLElement.prototype.allElements=function(){
var dom=this
for(var i=0;i<dom.children.length;i++){
a.push(dom.children[i])
if(dom.children[i].hasChildNodes()){
// console.log(this.children[i].children[i])
dom.children[i].allElements();
}
}
return a;
}
</script>
</body>
</html>
<script>
var list = [];//用来后面储存获取的元素
function getHDeles(ele) {//ele是形参,代表需要求打印哪个dom树
var children = ele.children;//获取ele下的子元素
for (var i = 0; i < children.length; i++) {//遍历children
var child = children[i]//children每一个子代存起来
list.push(child)//每一个子代存入数组当中
getHDeles(child);//子代也要求子代,继续调用这个函数
}
}
getHDeles(document);
console.log(list)//会打印document下的所有dom树:html,head,meta,body.....
</script>
2.封装函数,返回元素e的第n层祖先元素
<body>
<div>
<strong>
<span>
<i></i>
</span>
</strong>
</div>
<script>
function retParent(elem, n){
while(elem && n) {
//elem == null时候
elem = elem.parentElement;
n --;
}
return elem;
}
var i = document.getElem