JavaScript基础（4）

一.DOM的概念
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(html)标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构,DOM(是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

文档：一个网页可以称为文档；

节点：网页中的所有内容都是节点（标签、属
性、文本、注释等）；

元素：网页中的标签；

属性：标签的属性；

二.获取页面元素

1.根据id获取元素:

var div = document.getElementById("id2");

当id重名的时候，会获取第一个，id有唯一性的;

2.根据标签名获取元素:

//标签名获取元素
  var div = document.getElementsByTagName("div")[5];
  alert(div);

3.根据name获取元素:

// 通过name来获取
  var names = document.getElementsByName('n');
  for (var i = 0; i < names.length; i++) {
   alert(names[i]);
  }
  alert(names);

4.根据类名获取元素:

// 通过类名
  var mains = document.getElementsByClassName("main");
  alert(mains);

5.根据选择器获取元素:

// 根据选择器获取元素
  var id1 = document.querySelector('#id1');
  alert(id1);
  var mains = document.querySelectorAll('.main');
  alert(mains);

三.事件

1.事件三要素
（1）.事件源:触发(被)事件的元素；
（2）.事件名称: click 点击事件；
（3）.事件处理程序(回调函数):事件触发后要执 行的代码(函数形式)；

四。属性操作

1.非表单元素的属性：
href、title、id、src、className

var link = document.getElementById("link");
console.log(link.href);

HTML转义符

"  "
'  '
&  &
<  &lt;   // less than  小于
>  &gt;   // greater than  大于
空格    &nbsp;
©  &copy;

2.表单元素属性

（1）value 用于大部分表单元素的内容获取(option除外)；

（2）type 可以获取input标签的类型(输入框或复选框等)；

（3）disabled 禁用属性；

（4）checked 复选框选中属性；

（5）selected 下拉菜单选中属性；

3.自定义属性操作
（1）getAttribute() 获取标签行内属性
（2）setAttribute() 设置标签行内属性
（3）removeAttribute() 移除标签行内属性
（4）与element.属性的区别: 上述三个方法用于获取任意的行内属性。

4.样式操作
使用style方式设置的样式显示在标签行内；

5.类名操作
修改标签的className属性相当于直接修改标签的类名；

五.创建元素的三种方式

1.document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

2.innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

3.document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

六.节点操作
1.事件详解
注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}

2.常用的鼠标和键盘事件

（1）onmouseup 鼠标按键放开时触发

（2）onmousedown 鼠标按键按下触发

（3）onmousemove 鼠标移动触发

（4）onkeyup 键盘按键按下触发

（5）onkeydown 键盘按键抬起触发