javaScript - DOM

DOM

1. DOM树

页面标签结构树

---

2. 获取元素

1. getElementsById 根据id获取元素

2. getElementsByTagName 根据标签获取元素

3. HTML5新增
   getElementsByClassName 根据类名返回元素集合
   querySelector 根据指定选择器返回第一个元素对象
   querySelectorAll 根据指定选择器返回集合

4. 获取特殊元素（body,html）
   document.body 获取body元素集合
   document.documentElement 获取html元素集合
   parentNode 返回元素的第一个父节点

---

3. 事件

事件是可以被JavaScript侦测到的行为。
触发=>响应的一种机制
事件由事件源，事件类型，事件处理程序组成

事件源：事件被触发的对象

	var btn = document.getElementById(‘btn’);

事件类型：如何触发事件（不设置触发即网页加载触发）

	onclick

事件处理程序：通过一个函数赋值的方式

	btn.onclick = function() {
	 alert(‘Hello World!’);
	}

1) 执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值的形式）

4. 操作元素

   1. 改变元素内容

   element.innerText
   从起始位置到终止位置的内容
   （不识别/去除范围内的html标签，空格，换行）
   element.innerHTML（W3C标准）
   从起始位置到终止位置的内容
   （识别/不去除范围内的html标签，空格，换行）
   （这两者是可读写的，即可以用来获取值）
   2) 改变元素属性
   3) 添加标签

   <ul class=”space”></ul>
   <script>
   var space = document.querySelector(‘.space’);
   //获取ul元素
   var tag = document.createElement(‘li’)//创建空的i标签
   tag.appendChild(document.createTextNode(‘test text’));
   //组合标签与文本
   space.appendChid(tag);//添加标签
   </script>
   

   注意：使用js增加节点时，appendChild只能加一个元素的问题 :
   
   在给按钮添加触发事件时，如果设置从父节点添加子元素时会出现只能添加一个元素的‘BUG’。
   
   实际上是如果声明在触发事件外，那么从触发事件里面添加的子元素只能频繁调用外面开辟的一个地址。就会变成如果值变化只会出现加一个元素改变别的值的现象。
   
   如果在触发事件里面声明，每一次的触发都会开辟新地址，添加的都是不同的地址，就可以实现加多个元素了！！
   

   add.onclick = function(){
   	var li  =  document.createElement('li');
   	li.innerHTML = text.value;
   	ul.appendChild(li, ul.firstChild);
   }