JavaScript进阶

一.JS中的DOM

1.DOM的概述

DOM是Document Object Model 文档对象模型的缩写

HTML DOM是将HTML文档表达为树状结构,定义了访问和操作HTML文档的标准方法:DOM树:节点的层次,文档节点,元素节点,属性节点,文本节点;DOM把一个文档表示为一颗家谱树(父,子,兄弟);

2.获取元素的三种方式

1. 通过元素 Id getElementById，返回拥有指定 id 的第一个元素，如果不存在则返回 null
2. 通过标签名字 getElementsByTagName，返回一个包括所有给定标签名称的元素集合，如果没有 匹配的元素，返回一个空集。
3. 通过 class 名字 getElementsByClassName，返回一个包含所有指定class名称的元素集合，可以 在任意元素上调用该方法
4. 通过 name 名字 getElementsByName，返回一个包含所有指定name名称的元素集合，可以 在任意元素上调用该方法

案例

3.如何操作元素对象的属性

• 操作标准属性

  获取属性值 : 元素对象[“属性名”]

                     **元素对象.属性名** 
  
                    **元素对象.getAttribute("属性名")** 
  

• 设置属性值： 元素对象[”属性名”] = 值

                    **元素对象.属性名 = 值** 
  
                    **元素对象.setAttribute("属性名", 值)** 
  

• 操作自定义属性

  获取属性值： 元素对象.getAttribute("属性名")

  设置属性值： 元素对象.setAttribute("属性名", 值)

案例

4.Node对象的属性和方法

属性名	描述
firstChild	指向在子节点列表中的第一个节点
lastChild	指向在子节点列表中的最后一个节点
childNodes	所有子节点的列表
previousSibling	指向前一个兄弟节点,如果这个节点就是第一个,那么该值为null
nextSibling	指向后一个兄弟节点,如果这个节点就是最后一个,那么该值为null
parentNode	父节点
document.createElement("元素对象名")	新建一个元素对象
inerText	直接加入文本
innerHTML	可以设置html 代码(标签)

事件处理

事件绑定的方式

• 方式一 在元素上使用属性绑定

• 方式二通过元素对象的事件属性绑定( 使用这种方式为元素绑定事件, 一定是要在元素被加载后,然后再执行上面的JS代码)

//方式一  在元素上使用属性绑定
 

//方式二通过元素对象的事件属性绑定( 使用这种方式为元素绑定事件, 一定是要在元素被加载后,然后再执行上面的JS代码)
        
     //使用JS代码为元素绑定事件 
     var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("点我干啥"); 
        }

常用事件类型

鼠标事件

属性	描述
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的事件句柄
onmousedown	鼠标按钮被按下
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmouseup	鼠标按键被松开

键盘事件

属性	描述
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开

表单事件

属性	描述
onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发
onfocus	元素获取焦点时触发
onsubmit	表单提交时触发