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

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);