DOM基本知识

目录

一.概念：

二.功能：

三.事件：

四.核心DOM模型

1.Document：文档对象

2.Element对象

3.Node对象

五.HTML DOM

---

一.概念：

Document Object Model：文档对象模型

二.功能：

控制html文档的内容;获取页面的标签(元素)对象Element.

三.事件：

(1)功能：某些组件被执行了某些操作的时候，触发某些代码的执行。
(2)如何绑定事件：
    1.直接在html标签上，指定事件的属性(操作),属性值就是js代码。
           事件.onclick--- 单击事件 
    2.通过js获取元素对象，指定事件属性，设置一个函数。

(3)常见的事件：
1.点击事件：
     (1).onclick: 单击事件  
     (2).ondblclick:双击事件
2.焦点事件
     (1).onblur :失去焦点
     (2).onfocus :元素获得焦点。
3.加载事件：
     (1).onload :一张页面或一幅图像完成加载。
4. 鼠标事件：
     (1).onmousedown 鼠标按钮被按下。
     (2).onmouseup鼠标按键被松开。
     (3).onmousemove鼠标被移动。
     (4).onmouseover鼠标移到某元素之上。
     (5).onmouseout鼠标从某元素移开。
5.键盘事件：
     (1).onkeydown 某个键盘按键被按下。
     (2).onkeyup 某个键盘按键被松开。
     (3).onkeypress 某个键盘按键被按下并松开。
6.选择和改变
     (1). onchange 域的内容被改变。
     (2). onselect 文本被选中。
7.表单事件：
     (1).onsubmit 确认按钮被点击。
     (2).onreset重置按钮被点击。

四.核心DOM模型

1.Document：文档对象

  (1).创建(获取):在html dom模型中可以使用window对象来获取
              1.window. document
              2.document
  (2).方法
               1.获取Element对象
                    1.getElementById():根据id属性值获取元素对家。id属性值一般唯
                    2.getElementsByTagName ():根据元素名称获取元素对象们。返回值是一个数组
                    3.get ElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组
                    4.getElementsByName():根据name属性值获取元素对象们。返回值是一个数组

<div class="c1">1</div>
<div class="c1">2</div>
<div class="c2">3</div>
<div class="c2">4</div>
<div class="c2">5</div>
<input type="text" name="n1">

 var c1=document.getElementsByClassName("c1");
    alert(c1.length);

结果：2

var d=document.getElementsByTagName("div");
    alert(d.length);

结果：5

var n1=document.getElementsByName("n1");
    alert(n1.length);

结果：1

             2.创建其他DOM对象
                   1.createAttribute(name)
                   2.createComment()
                   3.createElement()
                   4.createTextNode()

2.Element对象

(1).获取/创建:通过document来获取和创建
(2).方法：
          1.removeAttribute():删除属性
          2.setAttribute():设置属性

3.Node对象

(1).特点:所有dom对象都可以被认为是一个节点
(2).方法：
     CRUD dom树：
         1.appendChild():向节点的子节点列表的结尾添加新的子节点。
         2.removeChild():刪除（并返回）当前节点的指定子节点。
         3.replaceChild():用新节点替换一个子节点
(3).属性：
      parentNode 返回节点的父节点

五.HTML DOM

    (1).标签体的设计和获取：innerHTML
    (2).使用html元素对象的属性
    (3).控制元素样式
           1.使用元素的style属性来设置
           2.提前定义好类选择器的样式，通过元素的className属性来设置其Class属性值。