js中浏览器常见事件；如何获取页面中的标签

约定不等于承诺〃 2023-07-18 09:59 36阅读 0赞

# BOM操作之浏览器常见事件 #

**什么是事件？**

所谓的事件,就类似于一个约定。当触发条件时，就会执行 指定的程序 。  
例如：clcik 点击事件  
给标签绑定点击事件，当标签触发 点击条件时 执行绑定的程序。

### 如何添加事件 ###

**例如：clcik 点击事件**  
给标签绑定点击事件 当标签触发 点击条件时 执行绑定的程序

click         点击事件 --- 事件类型
    onclick       绑定点击事件 , 给标签绑定一个事件类型
    funciton(){}  事件处理函数 , 触发事件时,执行的程序
             也可以是一个已经定义好的函数

##### 实例 #####

<div id="d1">我是div1</div>
    
    <script> // 给div标签,绑定了一个事件类型 // 事件类型是点击事件类型 // 点div标签被点击时,触发执行程序 d1.onclick = function(){ console.log('我是div,有人点我'); } </script>

如果需要绑定已经定义的函数，必须绑定函数名称，或者变量名称。  
**绝对绝对绝对，不能有()** ，这里绑定的是，函数名称，变量名称中存储的 函数的地址。

##### 实例 #####

<div id="d2">我是div2</div>
    <div id="d3">我是div3</div>
    
    <script> function fun(){ console.log('我是定义好的函数程序,绑定给div点击事件') } // 如果有 () , d2.onclick = fun() // 将 fun() 的执行结果, 绑定给事件 var fun2 = function(){ console.log(123) } // 给点击事件,绑定一个fun函数名称中,存储的函数地址 // 触发事件时,调用地址,找到对应的函数,执行函数程序 d2.onclick = fun ; d3.onclick = fun2 ; </script>

### load 事件 ###

页面加载事件。  
load事件是当页面程序都加载结束之后，执行的程序。

##### 语法 #####

window.onload = function(){ }

如果JavaScript程序定义在其他程序(html,css)之前，为了让js程序能正常被读取，可以绑定 
    load 事件，让程序在 页面加载完毕之后，再执行。
    但是不推荐使用这种方法。
    
    一般是将script标签，写在程序的最下方。
    外部导入js文件，要么放在head中，要么也放在body的最下方。

### open 事件 ###

定义打开的页面 — 新窗口打开页面。

##### 语法 #####

window.open('url地址')

注意区别于window.location.href
    window.location.href = 'url地址' --- 当前窗口打开页面

##### 实例 #####

<button id="loc">location打开百度</button>
    <button id="ope">open打开百度</button>
    
    <script> loc.onclick = function(){ window.location.href = 'https:/www.baidu.com'; } ope.onclick = function(){ window.open('https:/www.baidu.com') ; } </script>

### scroll 事件 ###

滚动条事件。  
当浏览器 滚动条 位置发生改变时，触发事件。

##### 语法 #####

window.onscroll = function(){ }

##### 实例 #####

window.onscroll = function(){ 
        console.log('我滚了');
    }

### resize 事件 ###

当页面大小发生改变时，触发事件。

##### 语法 #####

window.onresize = function(){ }

##### 实例 #####

window.onresize = function(){ 
        console.log('我改了');
    }

### close 事件 ###

关闭当前页面事件。

##### 语法 #####

window.close()

##### 实例 #####

<button id="c">关闭页面</button>
    
    <script> c.onclick = function(){ window.close(); } </script>

### 总结 ###

常用的:
    	click    scroll   
    	其他不是很常用。
    	有的有on，有的没有on，是JavaScript的固定语法形式，记住就行了。

······························································································································

# DOM操作之获取页面标签方式 #

### (1) 通过 id属性值获取 标签对象 ###

##### 语法 #####

document.getElementById('id属性值')

执行结果，只能获取一个标签对象。
    注意：id属性值，一定要有引号。
          HTML中，id属性值一定不能重复设定。

##### 实例 #####

var oDiv1 = document.getElementById('div1');
    console.log(oDiv1);

### (2) 通过 class属性值 获取标签对象 ###

##### 语法 #####

document.getElementsByClassName('class属性值')

Elements 之后有一个s表示复数
    class属性，在JavaScript中，一律定义为 className
    class关键词用在其他功能上。
    执行结果，获取到的是，一个伪数组。
    即时只有一个符合条件的标签,获取到的也是一个数组。
    数组的单元，是符合条件的标签。
    可以通过索引下标，来获取某一个标签对象。
    不能被 forEach() 循环遍历

##### 实例 #####

var oDiv2 = document.getElementsByClassName('div2');
    console.log(oDiv2);
    console.log(oDiv2[0]);

##### 不能被forEach()循环 #####

oDiv2.forEach(function(v){ 
        console.log(v);
    });

### (3) 通过 标签名称 获取标签对象 ###

##### 语法 #####

document.getElementsByTagName('标签名称');

获取到是一个伪数组。
    数组的单元是符合条件的标签。
    不能被forEach()循环遍历。

##### 实例 #####

var oDiv3 = document.getElementsByTagName('div');
    console.log(oDiv3);

##### 不能被forEach()循环 #####

oDiv3.forEach(function(v){ 
        console.log(v);
    });

### (4) 通过 标签name属性的属性值 获取标签对象 ###

##### 语法 #####

document.getElementsByName('标签name属性的属性值')

获取到的结果是一个伪数组。
    数组内容是符合条件的标签。
    可以被forEach()循环遍历。

##### 实例 #####

var oSpan = document.getElementsByName('s');
    console.log(oSpan);

##### 可以被forEach()循环 #####

oSpan.forEach(function(v){ 
        console.log(v);
    });

# 推荐方法 #

### (5) 通过 只要是符合语法规范的方式 就能获取到标签对象 ###

##### 语法 #####

document.querySelector()     获取符合条件的第一个标签
    document.querySelectorAll()  获取符合条件的所有标签

所有标签是一个伪数组,可以被forEach() 循环遍历
    
    注意：低版本ie不兼容这两种方式

##### 实例 #####

// 通过标签的id属性值来获取,要记得写 # 号
    var oQuery1 = document.querySelector('#div1');
    console.log(oQuery1);
    
    // 通过标签的class属性值来获取,要记得写 . 号
    var oQuery2 = document.querySelector('.div2');
    console.log(oQuery2);
    
    // 通过标签的标签名称来获取
    // 只获取第一个div标签
    var oQuery3 = document.querySelector('div');
    console.log(oQuery3);
    // 获取所有div标签
    var oQuery4 = document.querySelectorAll('div');
    console.log(oQuery4);
    
    // 通过属性和属性值获取
    // 语法 : ('[属性="属性值"]') 
    
    // 获取name属性值是s的标签
    var oQuery5 = document.querySelectorAll('[name="s"]');
    console.log(oQuery5);
    
    // 获取type属性值是text的标签
    var oQuery6 = document.querySelectorAll('[type="text"]');
    console.log(oQuery6);
    
    
    // 还可以通过标签结构,获取
    // ul标签中,子级li标签
    // 只要是css语法支持的选择器语法都行
    // 父子,后代,兄弟....都支持
    var oQuery7 = document.querySelectorAll('ul>li');
    console.log(oQuery7);