前端学习记录 JS DOM

Posted 2022-10-29 zlrrrr

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 是事件捕获