原生JS DOM

最新推荐文章于 2024-03-06 14:22:32 发布

m0_46424423

最新推荐文章于 2024-03-06 14:22:32 发布

阅读量325

点赞数

分类专栏：前端地基文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_46424423/article/details/120003380

版权

本文详细介绍了DOM的基本操作，包括查看和遍历节点、节点的增删改查，以及DOM树的构建。同时，文章还涵盖了Date对象的使用、定时器的应用、BOM对象的操作，如滚动条、视口尺寸、元素尺寸和位置的获取。此外，重点讨论了事件处理，包括事件冒泡、捕获、事件委托及其在不同浏览器的兼容性。最后，文章还涉及到了JSON数据格式、异步加载JS和JavaScript加载时间线的知识。

摘要由CSDN通过智能技术生成

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