dom

dom节点

-文档节点：整个Html文档
-元素节点：Html文档中的HTML标签
-属性节点：元素的属性
-文本节点：Html标签中的文本内容

dom树

dom document对象

1.通过document对象调用获取元素节点

//会在整个页面加载完成之后才触发 为 window 绑定一个 onload 事件
window.onload = function() {
  alert("hello");
}

document.getElementById()
document.getElementsByTagName()
document.getElementsByName() //-通过 name 属性
document.getElementsByClassName() //通过 class 属性

//需要一个 css 选择器的字符串作为参数，可以根据一个 css 选择器来查询一个元素节点
//使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
document.querySelector()
//返回数组
document.querySelectorAll()

//创建一个元素节点对象，它需要一个标签名作为参数，并将创建好的对象作为返回值返回
document.createElement()
//用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
document.createTextNode()

2.document对象的属性

var body = document.body; //-属性，获取 body 的引用
var html = document.documnetElement; //属性，获取 html 根标签
var all = document.all;// 获取页面中所有元素 document.getElementsByTagName('*')

3.dom 元素对象

• 通过具体元素节点获取内容

  node.innerHTML
  node.innerText //获取元素内部的文本内容，和 innerHTML 不同的是它会自动将html去除
  node.nodeValue //文本节点
  

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

  node.getElementsByTagName()
  node.childNodes //-属性，表示当前节点的所有子节点 包括文本节点（注：空白文本节点）
  node.children //-属性，可以获取当前节点的所有子元素
  node.firstElementChild //-属性，可以获取当前节点的第一个子元素
  node.lastElementChild //-属性，可以获取当前节点的最后一个子元素
  node.firstChild //-属性，表示当前节点的第一个子节点
  node.lastChild //-属性，表示当前节点的第一个子节点
  

• 通过具体元素节点调用获取元素节点的父节点和兄弟节点

  node.parentNode //-属性，表示当前节点的父节点
  node.previousSibling //-属性，表示当前节点的前一个兄弟节点 (可能获取到空白文本节点)
  node.nextSibling //-属性，表示当前节点的后一个兄弟节点 (可能获取到空白文本节点)
  node.previousElementSibling //-属性，表示当前节点的前一个兄弟元素
  node.nextElementSibling //-属性，表示当前节点的后一个兄弟元素
  

• 通过具体元素节点增删改

  //向父节点中添加一个新的子节点
  parentNode.appendChild(childNode)
  //可以在指定的子节点前插入新的子节点
  parentNode.insertBefore(newNode, oldNode)
  //可以使用指定的子节点替换已有子节点
  parentNode.replaceChild(newNode, oldNode)
  //删除子节点
  parentNode.removeChild(childNode)
  

• 通过 js 操作元素样式

  //设置
  node.style.样式名 = 样式值 //修改的是内联样式
  //读取
  node.style.样式名 //读取的是内联样式 不能读取样式表中的样式
  //读取当前元素正在显示的样式
  node.currentStyle.样式名
  getComputedStyle(要获取样式的元素, null) //window 方法
  node.className = '' //设置元素 class 名
  

• 元素关于其他样式的属性

  /*
  可以获取元素的可见宽度和高度（内容区和内边距）
  返回一个数字，不带px 
  只读
  */
  node.clientWidth
  node.clientHeight
  
  //可以获取元素的宽度和高度（内容区、内边距和边框）
  node.offsetWidth
  node.offsetHeight
  
  // 可以获取元素的定位父元素
  node.offsetParent
  
  //可以获取元素相对于父元素的水平和垂直偏移量
  node.offsetLeft
  node.offsetTop 
  
  //可以获取元素整个滚动区域的宽度和高度
  node.scrollWidth
  node.scrollHeight 
  
  //可以获取元素水平和垂直滚动条滚动的距离
  node.scrollLeft
  node.scrollTop
  
  //注意：当 scrollHeight - scrollTop == clientHeight 时，说明滚动条到底了
  

dom事件

1.事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

//该事件将会在鼠标移动时触发
node.onmousemove = function(e) {
  e = e || window.event; //兼容 ie
  var x = e.clientX;
  var y = e.clientY; //获取鼠标指针的水平和垂直坐标 相对于可见窗口的
  x = e.pageX；
  y = e.pageY; //相对于当前页面
}
node.onmousedown //鼠标按下
node.onmouseup  //鼠标松开
node.onmousewheel //鼠标滚轮滚动
node.onkeydown
node.onkeyup
//当调用一个元素的 setCapture 方法之后，这个元素会把下一次所有的鼠标按下相关的事件捕获到自己身上（调用己的鼠标按下事件）
//只在 ie 中有效
node.setCapture()
node.releaseCapture()

2.冒泡 事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

//取消冒泡
node.onclick = function(e) {
  //ie
  e.cancelBubble = true;
  //others
  e.stopPropagation();
}

3.事件的委派

-将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元的响应函数来处理事件
-事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

4.事件的绑定

/*  
addEventListener()
-通过这个方法也可以为元素绑定响应函数
-参数：
  1.事件的字符串，不要 on
  2.回调函数，当事件触发时该函数会被调用
  3.是否在捕获阶段触发事件，需要一个布尔值，一般都传 false
使用 addEventListener() 可以同时为一个元素的相同事件同时绑定多个响应函数，
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
注意：不支持 IE8 及以下的浏览器 attachEvent()
      使用 addEventListener() 方法绑定相应函数，取消默认行为时不能使用 return false
      使用 event.preventDefault()
*/
node.addEventListener('click', function(){
  alert(1)
}, false)
node.addEventListener('click', function(){
  alert(1)
}, false)

5.事件的传播

1.捕获阶段
在捕获阶段时从最外面的祖先元素，向目标元素进行事件的捕获，但是默任不触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
注：如果希望在捕获阶段就触发事件，可以将 addEventListener() 的第三个参数设置为 true