JS获取界面节点

HTML：负责提供页面内容；

CSS：渲染页面；

JS：搞事情（事件），JS三大模块：ES、DOM、BOM。

一、事件

1、什么是事件？

        事件是可以被javascript侦测到的行为，通常配合函数使用，当事件发生时，函数才会执行。比如说我们在用户点击页面上的按钮时，可以产生一个onClick事件来触发某个函数。事件可以是浏览器或用户做的某些事情或动作。

事件是文档或者浏览器窗口中发生的，特定的交互瞬间。

事件是javaScript和DOM之间交互的桥梁。

2、事件的三要素

　　事件源：是指在哪个元素引发的事件

               如：a标签、div标签

　　事件：事件是指执行的动作

　　　　如：单击、双击等

　　事件驱动程序（事件处理程序）：即执行的结果

　　　　如：单击button标签所执行的函数

3、javascript中常用事件

1、onLoad ：当页面加载完毕后触发，常用于body元素

2、onUnload ：当页面关闭后触发，常用于body元素

3、onBlur ：当失去焦点时触发，常用于input表单元素

4、onFocus ：当获得焦点时触发，常用于input表单元素

5、onClick ：当点击时触发，可以用于任何元素

6、onMouseOver ：当鼠标悬浮时触发

7、onMouseOut ：当鼠标离开时触发

8、onMouseDown ：当鼠标按下时触发

9、onMouseUp ：当鼠标弹起时触发

10、onMouseMove ：当鼠标移动时触发

11、onChange ：当状态改变时触发，常用于select下拉选框

12、onSelect ：当文本框中的文本选中时触发

13、onkeypress ：当键盘按下时触发（要快于onkeydown）

14、onkeydown ：当键盘按下时触发（可能捕获功能键，如上下左右）

15、onkeyup ：当键盘弹起时触发

16、onSubmit ：当表单提交时触发，常用于form表单元素

17、onReset ：当表单重置时触发，常用于form表单元素

二、DOM

1、什么是DOM

    文档对象模型（Document Object Model 简称DOM）。

    它是W3C 制定的浏览器提供的对HTML文档操作的接口，把文档中的代码内容翻译成一个对象模型

    在这个模型中，所有相关的标签属性注释文本等等12种数据，都翻译为一种类型的对象，统称节点对象

    节点对象之间，在文档模型数据结构中存在某种关系：根节点 父子节点 同胞节点等等

2、获取元素的方式

（1）系统提供的方式

【旧方法】
document.getElementById   //通过ID获取
document.getElementsByName   //通过name获取
document.getElementsByTagName   //通过标签名字获取
document.getElementsByClassName   //通过类名获取

 

以上获取方法中get后面除了ID是Element单数外，其余的都是Elements复数，因为在Document中每一个元素的id都是唯一的，但是name却可以重复。

【新方法】（IE8以下版本没有）

document.querySelector   //只能选择第一个匹配的节点

document.querySelectorAll   //可以选择多个节点，以","隔开，返回一个数组

 

PS：不建议直接使用标签的ID作为节点对象引用

注意：dom方法中除了getElementById和querySelector方法，其他方法获取的都是类数组

 

（2）系统提供的直接获取的方法

document.body  //body标签
document.forms  //form表单们
document.anchors //a标签们
document.images //图片们
document.links //连接们
document.URL //当前文档的网址
document.documentElement //根节点

//界面所有元素节点
document.all
document.getElementsByTagName("*");

 

（3）* 通过关系获取（父子、兄弟、后代）

注意：以下每种关系的遍历方式，分为 遍历节点树 和 遍历元素节点树 两种

//父级 父元素和父节点是同一个
var re=document.getElementById("div1").parentElement  //父元素
var re=document.getElementById("div1").parentNode  //父节点
console.log(re)

//所有子级，子元素和子节点不一定是同一个
var son1=document.getElementById("box1").children  //返回值是子元素们 没有返回空数组
console.log(son1)
var son1=document.getElementById("box1").childNodes //返回值是子节点们 没有返回空数组
console.log(son1)
            
//第1个子级
var son1=document.getElementById("box1").firstChild  //第一个子节点
var son2=document.getElementById("box1").firstElementChild //第一个子元素节点
console.log(son1,son2)
            
            
//最后一个子级
var son1=document.getElementById("box1").lastChild  //最后一个子节点
var son2=document.getElementById("box1").lastElementChild //最后一个子元素节点

//兄弟
var re = document.getElementById("box4").nextSibling  //下一个兄弟节点 没有返回null
console.log(re)
var re = document.getElementById("box2").nextElementSibling  //下一个兄弟元素 没有返回null
console.log(re)
var re=document.getElementById("box3").previousSibling  //上一个兄弟节点 没有返回null
console.log(re)
var re=document.getElementById("box3").previousElementSibling  //上一个兄弟元素 没有返回null
console.log(re)    
            
//eg1：获取自己是父元素中的第几个子元素/节点

//自己实现这个方法:调用者是父元素中的第几个元素 .index()                        
 Object.prototype.index2=function() {
     console.log(this)
     var arr=this.parentElement.childNodes
     for (let i = 0;i<arr.length;i++) {
         if(this==arr[i]){
             return i
            }
     }
 }
 var index=document.getElementById("box4").index2()
console.log(index)

            
//eg2：父元素中的第几个子元素/节点                    
var son1=document.getElementById("box1").children[1]//第二个子元素
var son2=document.getElementById("box1").childNodes[1]//第二个子节点