前端学习记录 JS DOM

浪尽此生 提交于 2019-11-29 13:48:01

HTML DOM 文档对象模型 被结构化为对象树

 

 HTML DOM 方法是能在 HTML 元素上执行的动作

HTML DOM 属性是能够设置或改变 HTML 元素的值

查找 HTML 元素

  document.getElementById(id) 通过元素 id 查找

  document.getElementByTagName(name) 通过标签名查找

  document.getElementByClassName(name) 通过类名查找元素

改变 HTML 元素

  element.innerHTML = new html content 改变元素的 inner HTML

  element.attribute = new value 改变 HTML 元素的属性值

  element.setAttribute(attribute, value) 改变 HTML 元素属性值

  element.style.property = new style 改变 HTML 元素样式

删除和添加元素

  document.createElement(element) 创建 HTML 元素

  document.removeChild(element) 删除 HTML 元素

  document.appendChild(element) 添加 HTML 元素

  document.replaceChild(element) 替换 HTML 元素

  document.write(text) 写入 HTML 元素

添加事件处理程序

  document.getElementById(id).onclick = function() {code} 向 onclick 事件添加事件处理程序

查找 HTML 对象

  document.anchors

  document.applets

  document.baseURL

  document.body

  document.cookie

  document.doctype

  document.documentElement

  document.documentMode

  document.documentURL

  document.domain

  document.domConfig

  document.embeds

  document.forms

  document.head

  document.images

  document.implementation

  document.inputEncoding

  document.lastModified

  document.links

  document.readyState

  document.referrer

  document.scripts

  document.strictErrorChecking

  document.title

  document.URL

DOM 事件监听器

  element.addEventListener(event, function, useCapture);

    第一个参数是事件类型(click / mousedown / ...)

    第二个参数是事件发生时调用的函数

    第三个参数是布尔值 指定使用事件冒泡还是事件捕获 

    举个栗子:element.addEventListener("click",  function() { alert ("Zlrrr"); });

事件冒泡和事件捕获

  在 HTML DOM 中有两种事件传播的方法 冒泡和捕获;事件传播是一种定义当发生事件时元素次序的方法 例如 <div> 标签里面有 <p> 然后用户点击了 <p> 那么应该先处理哪个的 click 事件?在冒泡中 最内侧的元素会被最先处理(<p> <div>)在捕获中最外侧的元素会被最先处理 (<div> <p>) 默认 useCapture = false 是冒泡 true 是事件捕获

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!