DOM 对象

每个载入浏览器的 HTML 文档都会成为
Document 对象。

就是把HTML文档模型化，当作对象来处理

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

Document 对象属性

• src
  • document.getElement("").src;
  • 得是文件，不能诸如 div 这种标签，比如 img 标签
• title
• className 获取或设置类名
• href 获取或设置链接地址
• value

获取节点

DOM获取节点分为两种方式，第一种方式通过document来获取，第二种方式通过节点指针来获取。

通过document来获取获取元素

• 通过标签获取
  • document.getElementsByTagName();
  • 获取的数组
• 通过类名获取
  • document.getElementsByClassName();
  • 获取的数组
• 通过标签 name 属性名
  • document.getElementsByName();
  • 获取的数组
• 啥都能取
  • document.querySelector();
  • document.querySelector("#div"); 针对类名和id 要加选择符 “#” 和 “.”
• 查找所有的元素
  • document.querySelectorAll();
  • 针对类名和id 要加选择符 “#” 和 “.”
• 可以叠加
  • document.getElementsByTagName()[].querySelectorAll();

通过节点指针属性

• firstChild 查找第一个子节点
  • document.getElementsByClassName().firstChild;
• firstElementChild 查找第一个元素节点
• lastChild
• lastElementChild
• childNodes 节点集合（节点数组）
• children 获取元素集合
• childElementCount() 统计元素个数
• previousSilbling 上级节点
• previousElementSibling 上级元素
• nextSilbling
• parentNode 上级元素节点 有且只有一个

操作属性

DOM属性操作分为获取属性、设置属性以及删除属性三类。

• getAttribute() 方法
• setAttribute() 方法
• removeAttribute() 方法

操作节点

属性节点

• nodeType
  • 元素节点 1
  • 文本节点 3
• nodeName
  • 元素节点 文本内容
  • 文本节点 “#test”
• nodeValue
  • 元素节点 null
  • 文本节点 文本内容

创建节点

• document.createElement(“b”);
• document.createAttribute(“title”);
• document.createTextNode(“加粗文字”);

插入节点

• appendChild() 追加一个新元素
  • var str = document.createTextNode(“加粗文字”);
  • b.appendChild(str);
  • document.querySelector(“div”).appendChild(b);
• insertBefore() 在 … 之前插入
• replaceChild() 替换节点
• cloneNode()
  • cloneNode(true) 方法克隆所有属性以及它们的值。
  • 如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。
• removeChild()
  • 方法指定元素的某个指定的子节点。

总结：动态创建元素的三种方式

• 方式一：
  • document.write()
• 方式二：
  • innerHTML
• 方式三：
  • createElement()
  • appendChild()
  • removeChild()
  • insertBefore()
  • replaceChild()

动态创建表格：

• createElement()
• tab
  • rows
  • insertRow()
  • deleteRow
• tr
  • cells
  • insertCell()
  • deleteCell()

文本操作

• insertData(start,string);
  • document.getElementById().childNodes[0].insertData(2,“一”);
• appendData() 结尾处插入
• deleteData(start,length) 删除子节点
• replaceData(start,length,“字符”) 替换
• splitText()
• substringData()

DOM 改变风格样式

• className
  • 改变类选择器的名字
  • document.getElementById(“h”).className = “red”;
• style（只能获取到行内样式（嵌入式）和修改行内样式（嵌入式））
  • document.getElementById(“h”).style.color = “red”;
  • document.getElementById(“h”).style.cssText = “border-radius = 8px”;

DOM 元素属性

• 返回元素的可见高度、宽度
  • element.clientHeight
  • element.clientWidth
• 返回元素的高度、宽度
  • element.offsetHeight:
  • element.offsetWidth:
• 返回元素的水平偏移位置
  • element.offsetLeft:
• 返回元素的偏移容器
  • element.offsetParent：
• 返回元素的垂直偏移位置
  • element.offsetTop:
• 返回元素的滚动条整体高度，宽度
  • element.scrollHeight：
  • element.scrollWidth:
• 返回元素滚动条左边缘、上边缘与视图之间的距离。
  • element.scrollLeft：
  • element.scrollTop:

DOM 事件

凡是事件，事件的声明顺序没关系。

注册事件方式

1. on + “事件名称”
   • 只能使用一次
   • 后面的覆盖前面
2. addEventListener
   • IE 9 以上支持
   • 不会覆盖原来的事件，可以添加多次事件
   • 可以选择捕获或者冒泡
   • IE9以前使用attachEvent
   • doucment.querySelector().addEventListener(“click”,function(){},false);
   • 和第一种区别
     • 事件名称的区别
       • 第一个参数是 type，type 的值有 “click” “load” ，不必带有 on
   • IE 9 中 this 的区别
     • attachEvent: 事件处理程序是在全局作用域下运行，因此 this 就是 window
     • addEventListener: 事件处理程序会在当前对象的作用域运行，因此 this 就是当前对象。

html 标签事件
事件属性

• 表单元素属性
  • onchange() 当元素改变时执行脚本
  • onsubmit() 当表单被提交时执行脚本
  • onreset() 当表单被重置时执行脚本
  • onselect() 当元素被选取时执行脚本
  • onblur() 当元素失去焦点时执行脚本
  • onfocus() 当元素获得焦点时执行脚本
• onfocus
• onblur
• onclick
• onselect
• onchange
• onmouserover
• onmouseout
• onkeydown
• onkeyup
• ontouchstart
• ontouchmove

事件冒泡 / 事件捕捉

• 事件冒泡
  • 从下往上，先获取最下层的事件
  • document.get…(div).addEventListener(“click”,function(){}, false)
  • document.get…(body).addEventListener(“click”,function(){}, false)
  • document.addEventListener(“click”,function(){}, false)
  • 先显示 div 的，在显示 body，再显示 document 的
  • 最后一个参数 false
• 事件捕捉
  • 和冒泡相反
  • 最后一个参数 true

事件委托

• 利用冒泡的的原理将子元素的事件交给父元素来处理
  • 加快执行速度
  • 优化代码
  • 给未来元素添加事件

    document.get...().onclick = function(abc){
        alert(abc.target.value);
    }

事件对象的获取方式

• 标准 DOM 的事件对象
  • 通过参数传递进来
  • IE 中的事件对象 window.event
  • 兼容浏览器的方案
    • event = event?event:window.event（三目运算符）
    • var abc = abc || window.event;

事件对象的属性

• 获取当前对象（只读）
  • target 触发事件的元素
  • currentTarget 始终是当前执行事件处理程序的对象
  • IE 中对于的属性是 srcElement
• 事件类型
  • tyep
    • 值为 click，mouse over …
• 事件处于哪个阶段（只读）
  • eventPhase;
• 取消默认行为
  • preventDefault
  • IE 对应 returnValue = false
• 取消冒泡和捕获
  • stopPropagation() 取消冒泡和捕获
  • IE 中对应 cancelBubble = true 取消冒泡（IE 不支持捕获）

键盘事件

• keydown、keypress、keyup
• 事件对象的属性
  • keyCode 键盘码，只有数字和字母对应 ASCII 码
  • charCode 对应 ASCII 码，只有 keypress 才有效

DOM 移除事件有两种方式

• 第一种 element.onclick = null

• 第二种 removeEventListener

  • IE9 以前是 detachEvent attachEvent
  • 注意：如果注册的时候使用的是匿名函数，则无法移除。

• 鼠标点击可见宽高位置

  • clineX/clineY
  • 可见页面的宽高，只包括了浏览器

• 鼠标点击页面宽高位置

  • pageX/pageY
  • 整个页面的宽高，包括滚动条
  • 范围是浏览器显示页面

• 鼠标点击屏幕宽高位置

  • screenX/screenY
  • 范围是屏幕，超过浏览器

• ctrlKey

  • 只对键盘事件有效
  • 如果是按了 ctrl 组合键，返回值为 true，不是 true

• shiftKey

• altKey

• button

其他

• oncontextmenu()
  • 阻止弹窗