什么是document对象?如何获取文档对象上的元素?_JavaScript面向对象编程

最新推荐文章于 2022-09-05 17:48:41 发布

weixin_39779928

最新推荐文章于 2022-09-05 17:48:41 发布

阅读量349

点赞数

文章标签：什么是document对象?如何获取文档对象上的元素?

面向对象编程更符合人类对所接触世界的逻辑思维。把一个系统划分成一个个子系统，子系统又划分成一个个模块，系统分为一个对象，再给这次对象（模块）赋予属性、功能和方法。

创建对象的方式

1、字面量的方式

var student = {
 name:"蔡徐坤",
 type:"练习生",
 like:"唱跳rap篮球",
 rap:function(){
  console.log("鸡你太美")
 }
}
console.log(student)
student.rap()

这种方式写起来方便，但是如果要生成大量的类，就要写一堆重复的代码

2、工厂模式

function Student(name,type,like){
 return {
  name:name,
  type:type,
  like:like,
  rap:function(){
   console.log("鸡你太美")
  }
 }
}
var s1 = Student("蔡徐坤1","篮球运动员",'篮球')
console.log(s1)

所以用到工厂模式，可以快速生成批量的对象，缺点是对象同样的方法，每创建一个对象，都会生成一个同样新的函数，占用内存。

3、构造函数创建对象

//构造函数
function Teacher(){
 this.name = "苍老师";
 this.type = "老师";
 /*this.movies = function(){
  console.log("拍电影")
 }*/
}
 
//设置创建对象的原型函数
Teacher.prototype.movies = function(){
 console.log("拍电影1")
}
 
 
//如果不用new来构建函数，那么就是一个普通的函数调用,并且this的指向是window
//如果用了new,就会创建一个新的对象，并且将对象给到t1.
var t1 =new Teacher()
console.log(t1)

4、ES6的class写法（最常用）

//语法糖,ES6新增的语法。2015的新标准。es6 ==> EcmaScript 2015,2015发布的JavaScript的标准。
  class Cat{
   constructor(){
    this.name = "波斯猫"
   }
   run(){
    console.log("会跑")
   }
   say(){
    console.log("喵喵喵")
   }
                var c1 = new Cat()
		console.log(c1)

还可以用到继承extends

class cxk{
   rap(){
    console.log("鸡你太美")
   }
  }
class Cat extends cxk{
			constructor(){
				super()//super这个关键词，是调用继承的class的构造函数
				this.name = "波斯猫"
			}
			run(){
				console.log("会跑")
			}
			say(){
				console.log("喵喵喵")
			}
		}
		
		var c1 = new Cat()
		console.log(c1)

cat继承了cxk，所以创建对象后也可以调用cxk的方法了。记得用上constructor（）{}

DOM对象

DOM对象，就是HTML页面文档的对象。整个页面的显示，都由document对象文档构成。文档对象又由许多的元素对象构成。文档对象里面就有许多属性和方法来操控页面的显示，以及事件的处理。所有元素的对象最终组成庞大的dom树。

ES5以前查找元素的方式已经不方便，也不怎么用了。
//ES5以前查找元素的方式
//通过ID查找元素对象
var d1 = document.getElementById("d1")
console.log(d1)
//通过class查找元素对象
var abc = document.getElementsByClassName('abc')
console.log(abc)
//通过标签名称查找元素对象
var div = document.getElementsByTagName("div")
console.log(div)

ES5以后的查找方式才是现在常用且方便的方式了

var div1 =  document.querySelector("div")
console.log(div1)
var id1 = document.querySelector("#d1")
console.log(id1)
var abc1 = document.querySelector('body .abc')
console.log(abc1)
 
//选择多个元素,document.querySelectorAll()
var abc2 = document.querySelectorAll("#d1")
console.log(abc2)
 
 
for(var i =0 ;i<abc2.length;i++){
 abc2[i].innerHTML +=i
 abc2[i].style.background="green"
}

通过DOM对象来设置DOM对象里的HTML

1、设置样式

里面的样式如background-color中，都去掉-，然后用首字母大写来拼接一个单词，像Java中的驼峰命名法。

h1.style.backgroundColor = "skyblue"

2、修改dom的样式

通过创建style的对象，在里面写好相应的样式。不过这种也是不怎么常用。。

//创建元素
var s1 = document.createElement("style")
//设置s1的innerHTML的内容
s1.innerHTML = 'h1{color: red;}';
//将style元素插入到HTML页面的body里
document.body.appendChild(s1)

3、设置dom对象的类名

这种为常用的方式，比如说我们将一个div里的图片通过鼠标的点击进行隐藏或者显示的操作。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  
  <style type="text/css">
   .list{
    width: 400px;
    position: absolute;
    left: -400px;
    top: 0; 
    transition: all 2s;
    
   }
   .listOut{
    width: 400px;
    position: absolute;
    left: 0px;
    top: 0;
    transition: all 2s;
   }
   .list img{
    width: 400px;
   }
   .btn{
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 1;
   }
  </style>
 </head>
 <body>
  <div class="main">
   <div class="btn">切换</div>
   <div class="list">
    <img src="img/timg.jfif"/>
   </div>
  </div>
  
  
  <script type="text/javascript">
   var btn = document.querySelector('.btn')
   var list = document.querySelector('.list')
   btn.onclick = function(){
    console.log(list.className)
    if(list.className == "list"){
     list.className = "listOut"
    }else{
     list.className = "list"
    }
 
   }
  </script>
 </body>
</html>

事件

1、on事件

这种方式写起来方便简单，但是只能调用一个函数，只有冒泡事件。

var h1 = document.querySelector('h1')
h1.onclick = function(){
  h1.style.backgroundColor = "deeppink"
  }

2、AddEventlistener

这种方式可以在同一个事件中调用多个函数，这种模式下可以设置事件是冒泡或者是捕获。

h1.addEventListener(事件的名称,事件调用起的函数，true/false(捕获/冒泡))

冒泡事件和捕获事件的区别

冒泡事件由子元素一层一层向上触发，知道HTML元素，那么这种事件就是冒泡事件。一般情况下就使用冒泡，使用AddEventlistener不写最后一个参数，就默认为false，即为冒泡事件。

捕获事件则从HTML开始一层一层向下触发，直到最小的子元素，这种事件模式为捕获。

其他事件

点击事件：

1、单击事件 onclick

var h1 = document.querySelector('h1')
			
			//单击事件
			h1.onclick = function(event){
				console.log(event)
				h1.style.background = "skyblue"
			}

2、双击事件 ondbclick

h1.ondblclick = function(event){
				console.log(event)
				h1.style.background = "pink"
			}

鼠标事件

1、鼠标移入 onmouseenter

var h1 = document.querySelector('h1')
			//鼠标移入某个元素
			h1.onmouseenter = function(event){
				console.log(event)
				h1.style.background = "green"
			}

这里event可以在浏览器中获取到鼠标移入时的信息，比如坐标等等。

2、鼠标移出 onmouserleave

h1.onmouseleave = function(event){
				console.log(event)
				h1.style.background = "purple"
			}

3、鼠标悬浮 onmouseover

h1.onmouseover = function(){
				console.log("onmouseover")
			}

按键事件

1、按键按下 onkeydown

var input1 = document.querySelector('#input')
			/*//键盘按下事件
			input1.onkeydown = function(event){
				console.log(event)
			}

2、按键弹起 onkeyup

input1.onkeyup = function(event){
				console.log(event)
			}

3、按键press

input1.onkeypress = function(event){
				console.log(event)
			}

通过查看event记录的事件，可以看到在浏览器中输入信息时，按下的是键盘的什么键位。

另外还有手指的触屏事件，聚焦事件，文档的加载事件，这里就不一一列举啦！

感谢各位客官的浏览！

weixin_39779928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是document对象?如何获取文档对象上的元素?_JavaScript面向对象编程

面向对象编程更符合人类对所接触世界的逻辑思维。把一个系统划分成一个个子系统，子系统又划分成一个个模块，系统分为一个对象，再给这次对象（模块）赋予属性、功能和方法。创建对象的方式1、字面量的方式var student = { name:"蔡徐坤", type:"练习生", like:"唱跳rap篮球", rap:function(){ console.log("鸡你太美") }}c...
复制链接

扫一扫