05_JavaScriptDOM对象

0. 概述

1. 功能:获取HTML文档的内容

2. 例如: 获取页面标签(元素)对象Element

    document.getElementById("id值"); // 通过元素id获取元素对象
    // 其实是window.document.getElementById("id值");
    // 但是window省略

3. 获取完可以操作Element对象

   • 修改属性值:
     • 明确获取对象是哪一个
     • 查看API文档看有什么可以修改的属性值
   • 修改标签体内容
     • 通过innerHTML属性修改标签体内容(对象.innerHTML = …)
     • 内容是指写在开始与结束标签中间的内容,属性值是指写在尖括号里的属性

4. DOM树:

   

5. DOM分为:

   • 核心DOM
     • Document:文档对象
     • Element:元素对象
     • Node:节点对象,其他五个对象的父对象
     • Attribute:属性对象
     • Text:文本对象
     • Comment:注释对象
   • xmlDOM
   • HTMLDOM

---

1. 核心DOM

1.1 Document 文档对象

1. 创建(获取) : 在HTMLDOM里可以使用window对象获取

   window.document
   document
   

2. 方法

   • 获取Element对象
     1. getElementById(), 根据id属性值获取元素对象,因为id唯一所以返回一个对象
     2. getElementByTagName(), 根据元素名称获取元素对象们,返回一个数组
     3. getElementByClassName(), 根据class属性值获取元素对象们,返回数组
     4. getElementByName(), 根据name属性值返回元素对象们,返回数组
   • 创建其他DOM对象(不重要):
     1. createAttribute(name)
     2. createElement()
     3. createComment()
     4. createTextNode()

3. 属性

1.2 Element 元素对象

1. 创建/获取:通过document获取或创建
2. 方法:
   • removeAttribute(“属性名如id,href”), 删除属性
   • setAttribute(“属性名”,“属性值”), 设置属性

1.3 Node 节点对象

1. 特点:不是一个获取的对象,所以DOM对象都可以认为是一个节点

2. 方法

   主要用于CRUD DOM对象

• removeChild(Element元素对象),删除(并返回)当前节点的子节点

  注意,除了使用按钮绑定事件删除节点,还可以使用超链接删除, 超链接功能:

  1. 可以被点击,有样式

  2. 自动跳转到指定URL,如果不写href属性,没有点击功能,如果没写属性值,默认跳转本页面(即刷新)

  3. 所以为了使用超链接标签实现按钮功能,可以:

href = "javascript:void(0);"

• appendChild(Element元素对象), 向当前节点的子节点列表末尾在插入一个子节点,需要先使用document中的创建Element对象的方法创建一个Element对象

• replaceChild(), 用新节点替换一个子节点

3. 属性:

   • parentNode, 返回当前节点的父节点

---

2. HTML DOM

1. 标签体的设置和获取:innerHTML属性,(设置:=,+=)

2. 使用HTML元素对象的属性,查API文档看不同元素有什么属性

3. 控制元素样式

   1. 使用元素的style属性,修改属性值,与css的:不同,使用的是=,示例:

element对象.style.属性 = "属性值";
//如果是font-size这种属性,写成fontSize(js形式)

2. 先写好css代码(如类选择器),然后通过对象.className="class值";的方法绑定class值,使css代码生效

---

3. 事件

想要删除东西的时候,东西太多设置id删除太麻烦,可以通过在属性里面写onclick(事件) = “方法名(this);”

3.1 绑定事件

1. 直接在HTML标签上,指定事件的属性(操作),操作值就是JS代码 ----- 耦合度高

   1. 即在标签属性值里面写事件名 = “JS代码”;建议在代码里写函数,属性操作值时直接调用函数
   2. 事件:onclick — 鼠标单击事件

2. • 先获取对象

     • 再将事件当成属性绑定事件, 如:

对象名.onclick = fun;  // fun是函数名,不加括号
//也可以使用匿名方法
对象名.onclick = function(){
            
}

+ 记住代码执行顺序

3.2 常用事件

1. 点击事件：

   1. onclick：单击事件
   2. ondblclick：双击事件

2. 焦点事件

   1. onblur：失去焦点。
      • 一般用于表单验证,失去焦点后判断输入是否正确
   2. onfocus:元素获得焦点。

3. 加载事件：

   1. onload：一张页面或一幅图像完成加载。
      • 可以由对象绑定 ,所以经常window.onload = 方法();用于页面加载完毕后做什么

4. 鼠标事件：

   1. onmousedown 鼠标按钮被按下。

      • 定义方法时，定义一个形参，接受event对象。

      • 方法返回event对象

      • event对象的button属性可以获取鼠标哪个键被点击了。

   2. onmouseup 鼠标按键被松开。

   3. onmousemove 鼠标被移动。

   4. onmouseover 鼠标移到某元素之上。

   5. onmouseout 鼠标从某元素移开。

5. 键盘事件：

   1. onkeydown 某个键盘按键被按下。
   2. onkeyup 某个键盘按键被松开。
   3. onkeypress 某个键盘按键被按下并松开。

6. 选择和改变

   1. onchange 绑定该事件的对象域的内容被改变时触发。
   2. onselect 绑定该事件的对象域的文本被选中时触发。

7. 表单事件：

   1. onsubmit 确认按钮被点击。

      • 用于确认完校验表单内容

      • 可以阻止表单的提交

        • 方法返回false则表单被阻止提交。

   2. onreset 重置按钮被点击。

      • 绑定清楚表单内容的方法