DOM，文档对象模型

• 获取元素
• • 节点
  • 获取元素节点
  • 获取元素节点的子节点
• 对元素进行操作
• • 操作元素属性
  • • 操作表单属性
    • 操作样式属性
• 动态创建元素
• • document.write();
  • inner HTML = ();
  • document.createElement();
• 事件
• • 事件监听程序
  • 分配事件

DOM全称：Document Object Model文档对象模型。JS通过DOM来对HTML文档进行操作。

• 文档：表示的是整个html网页文档
• 对象：表示将网页中的每一个部分都转换为一个对象
• 模型：使用模型来表示对象之间的关系，方便获取对象

DOM常进行的操作

• 获取元素节点
• 对元素进行操作
• 动态创建元素
• 事件

构成HTML文档最基本的单元

常用节点分四类

• 文档节点：整个html文档
• 元素节点：html文档中html标签
• 属性节点：元素的属性
• 文本节点：html标签中的文本内容
  

• 通过document对象调用

1. getElementById（）：通过id属性获取一个元素节点对象

   var myElement = document.getElementById("intro");
   

2. getEleMentsByTagName（）：通过标签名获取一组元素节点对象

   var x = document.getElementById("main");
   var y = x.getElementsByTagName("p"); 
   

3. getElementsByName（）：通过name属性获取一组元素节点对象

   var x = document.getElementsByName("intro");
   

4. getElementsByClassName（）:通过类名获取相同类名元素节点对象

   var x = document.getElementsByClassName("intro");
   

5. querySelectorAll（）：通过选择器获取元素节点内容

   var x = document.querySelectorAll("p.intro");
   

• 如果需要读取元素节点属性，直接使用元素.属性名，如元素.id,元素.name，元素.value，注意class属性需要元素.className

• 通过具体的元素节点调用

1. getElementByTagName（）：方法，返回当前节点的指定标签名后代节点
2. child Nodes：属性，表示当前节点的所有子节点
3. first Child：属性，表示当前节点的第一个子节点
4. lastChild：属性，表示当前节点的最后一个子节点

• 对象.src = ‘目标地址’
• 对象.href = ‘目标链接’
• 对象.alt = ‘目标替换文本’
• 对象.title = ‘目标图片提示信息’

• 对象.type = ‘更换表单类型’;
• 对象.value = ‘更换表单的内容’
• 对象.disabled = ‘true’

普通修改

123456798
  

// 点击目标盒子，显示一个红色背景
var box = document.querySelector('#box');
box.onclick = function() {
this.style.backgroundColor = 'red';
     }

利用className= '值'属性

// 设置红色背景的样式
.red {
      background-color: red;
 }

// 通过给目标盒子添加red的样式类，来改变他的背景
var box = document.querySelector('#box');
    box.onclick = function() {
       this.className = 'red';
     }

比较随意，想创建就创建，可以直接在write里写属性就行，但由于容易覆盖原页面，所以不推荐使用；

innerHTM和document.createElement()如果是创建单个元素是没有区别的。如果创建的元素数量很多， 使用innerHTML拼接字符串的方式和document.createElement()相比，效率会低很多。但如果使用innerHTML数组的形式和document.createElement()相比，效率就会提高很多，比document.createElement()效率还要高。

文档或浏览器窗口中发生的一些特定的交互瞬间，即用户和浏览器的交互行为

• JavaScript与HTML之间的交互是通过事件实现的
• 对于Web应用来说，有点击某个元素 、将鼠标移动到某个元素上方，按下键盘上某个键等这些代表性事件

1. 绑定HTML元素属性

2. 绑定DOM对象属性