三.样式操作与属性操作

JS DOM

DOM 简介

什么是DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式

DOM树

elementui按钮绿色_选择器

  • 文档：一个页面就是一个文档，DOM 中使用 document 表示
  • 元素：页面中的所有标签都是元素，DOM 中使用 element 表示
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看做是对象

获取元素

获取页面中的元素可以使用以下几种方式：

  • 根据 ID 获取
  • 根据标签名获取
  • 通过 HTML5 新增的方法获取
  • 特殊元素获取

根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象

document.getElementById('id');

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法

根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合

document.getElementsByTagName('标签名');

注意：

  • 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
  • 得到元素对象是动态的
  • 如果获取不到元素,则返回为空的伪数组（因为获取不到对象）

通过 HTML5 新增的方法获取

根据类名返回元素对象集合

document.getElementsByClassName('类名');

根据指定选择器返回第一个元素对象

document.querySelector('选择器');

根据指定选择器返回

document.querySelectorAll('选择器');

注意：querySelector 和 querySelectorAll 里面的选择器需要加符号，比如：document.querySelector('#nav');

获取特殊元素（html, head, title, body）（不太常用）

获取body, html, title, body元素

document.documentElement  // 返回html元素对象
document.head 			 // 返回head元素对象
document.title 		      // 返回title元素对象
documnet.body  			 // 返回body元素对象

样式属性操作

可以通过 JS 修改元素的大小、颜色、位置等样式

  • element.style：行内样式操作
  • element.className：类名样式操作

注意：

  • JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
  • JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

事件基础

事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为

简单理解： 触发— 响应机制

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作

事件三要素

  1. 事件源 （谁）
  2. 事件类型 （什么事件）
  3. 事件处理程序 （做啥）

常见的鼠标事件

elementui按钮绿色_elementui按钮绿色_02

操作元素

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等

改变元素内容

  • element.innerText：从起始位置到终止位置的内容，但它去除 html 标签， 同时空格和换行也会去掉
  • element.innerHTML：起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
//得到对应的标签（获取节点/获取元素/获取标签),以用于后续的操作
   
    /*通过id获取：*/
    let a = document.getElementById( "wrap" );

    //注册事件
    /*
    * onclick 左键单击
    * onmouseenter 鼠标移入
    * onmouseleave 鼠标离开
    *
    * */

    /*a.onclick = function(){
      alert("你点什么呢！！");
    };*/

    a.onmouseenter = function(){
      console.log("鼠标移入啦！");
    };

    a.onmouseleave = function(){
      console.log("鼠标离开啦！");
    };

补充：JS鼠标右击事件

/*方法一
*首先取消右键的系统默认弹窗
*/
document.oncontextmenu = function(e){
	return false
	//或者 e.preventDefault()
}

//用onmouseup或者onmousedown代替点击事件
//onclick事件无法用e.button判断鼠标左右键。
/*方法二
*用onmouseup或者onmousedown代替点击事件
*/
document.onmouseup = function(e){
	if(e.button == 2){
		console.log('右键点击了');       
	}
}
(e.button == 0对应鼠标左键，e.button == 1对应鼠标中键)
/*方法二
*浏览器默认行为 oncontextmenu事件
*/
document.oncontextmenu = function(e){
	//点击右键后要执行的代码
	//.......
	return false;//阻止浏览器的默认弹窗行为
}

样式操作

//操作内部样式表  不常用

/*let gd = document.getElementById("goudan");
  gd.innerText = "#nav{background-color:red}";*/
/*操作行内样式*/
let oNav = document.getElementById("nav");
/*如果操作 标签属性？*/

/*合法标签属性*/
oNav.title = "我是提示！";
// oNav.id = "goudan";
oNav.className = "abc";  //class比较特殊 

/*不合法标签属性 -- 以后在再说*/

操作标签属性

<style>
     #nav.abc{height: 120px;}
</style>
<div id="nav">文字</div>
  <script>
	let oNav = document.getElementById("nav");
    oNav.onclick = function(){
      oNav.className = "abc";
    };

    /*操作合法标签*/
    /*oNav.title = "加个title";

    oNav.className = "abc"; //class比较特殊 PS:直接写class虽然不会报错，但是类名不会被浏览器解析出来
 </script>