DOM

DOM

DOM （Document Object Model）是指文档对象模型，经过它，能够访问HTML文档的全部元素。

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。

当网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树。

HTML DOM树

DOM标准规定HTML文档中的每一个成分都是一个节点(node)：

• 文档节点(document对象)：表明整个文档
• 元素节点(element 对象)：表明一个元素（标签）
• 文本节点(text对象)：表明元素（标签）中的文本
• 属性节点(attribute对象)：表明一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

JavaScript 能够经过DOM建立动态的 HTML：

• JavaScript 可以改变页面中的全部 HTML 元素
• JavaScript 可以改变页面中的全部 HTML 属性
• JavaScript 可以改变页面中的全部 CSS 样式
• JavaScript 可以对页面中的全部事件作出反应

查找

直接查找

• document.getElementById
  • 根据id获取标签
• document.getElementByClassName
  • 根据class属性获取标签列表
• document.getElementByTagName
  • 根据标签名获取标签列表

间接查找

• 前提，已得到一个标签，在此标签的前提下
• parentElement 父节点标签元素
• children 全部子标签
• firstElementChild 第一个子标签元素
• lastElementChild 最后一个子标签元素
• nextElementSibling 下一个兄弟标签元素
• previousElementSibling 上一个兄弟标签元素

涉及到DOM操做的JS代码应该放在文档的哪一个位置。，否则可能找不到

节点操做

建立节点

• document.createElement(标签名)

添加节点

• 节点.appendChild(新节点)
  • 追加一个子节点（做为最后的子节点）
• 节点.insertBefore(新节点,某个节点);
  • 把增长的节点放到某个节点的前边

删除节点

• 得到要删除的元素，经过父元素调用该方法删除
• 父节点.removeChild(要删除的节点)

替换节点

• 父节点.replaceChild(新节点,被替换的节点)

属性节点

• 获取文本节点的值
  • 节点.innerText
    • 单纯的文字
  • 节点.innerHTML
    • 包括文字和html
• 设置文本节点的值
  • 节点.innerText="文本"
  • 节点.innerHtml="能够写HTML代码和标签"

attribute操做

• 节点.setAttribute("属性","值")
  • 设置节点的属性
• 节点.getAttribute("属性")
  • 获取节点的某属性值
• 节点.removeAttridute("属性")
  • 移除节点的某属性值
• 节点.属性
  • 获取节点的某属性值
• 节点.属性=值
  • 设置节点的某属性值

获取值操做

elementNode.value

适用于如下标签：

• .input
  
• .select
• .textarea

class的操做

className

• 获取全部样式类名(字符串)

classList.remove(cls)

• 删除指定类

classList.add(cls)

• 添加类

classList.contains(cls)

• 存在返回true，不然返回false

classList.toggle(cls)

• 存在就删除，不然添加

指定CSS操做

节点.style.css属性=值

JS操做CSS属性的规律

• 对于没有中横线（-）的CSS属性通常直接使用style.属性名便可
• 对含有中横线（-）的CSS属性，将中横线后面的第一个字母换成大写便可

事件

常见事件

• onclick 当用户点击某个对象时调用的事件句柄。
• ondblclick 当用户双击某个对象时调用的事件句柄。
• onfocus 元素得到焦点。 // 练习：输入框
• onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,表明已经输入完了,咱们能够对它进行验证.
• onchange 域的内容被改变。 应用场景：一般用于表单元素,当元素内容被改变时触发.（select联动）
• onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
• onkeypress 某个键盘按键被按下并松开。
• onkeyup 某个键盘按键被松开。
• onload 一张页面或一幅图像完成加载。
• onmousedown 鼠标按钮被按下。
• onmousemove 鼠标被移动。
• onmouseout 鼠标从某元素移开。
• onmouseover 鼠标移到某元素之上。
• onselect 在文本框中的文本被选中时发生。
• onsubmit 确认按钮被点击，使用的对象是form。

方式一

• this是实参，表示触发事件的当前元素
• 函数定义过程当中的this为形参

方式二

window.onload

当咱们给页面上的元素绑定事件的时候，必须等到文档加载完毕。由于咱们没法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的全部对象都位于DOM中，而且全部图像，脚本，连接和子框架都已完成加载。

注意：.onload()函数存在覆盖现象。

XMind: ZEN - Trial Version