提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
总结：DOM 4步:
- 先
查找可能触发事件的元素 - 再为元素
绑定事件处理函数 - 当事件发生时，
查找要修改的元素 修改元素
一. DOM 5件事: 增删改查+事件绑定:
1. 查找元素:
(1). 不需要查找就可直接获得的元素对象: 4种:
document.documentElement ——<html>
document.head —— <head>
document.body —— <body>
document.forms[i] —— <form>
(2).按节点间关系查找：
如果已经获得一个元素对象，找周围附近的元素对象时，就用按节点间关系查找
2大类关系，6个属性：
a. 父子关系: 4种
1).元素的父元素: 元素.parentElement或元素.parentNode
2). 元素下的所有直接子元素: 元素.children
3). 元素下的第一个直接子元素: 元素.firstElementChild
4). 元素下的最后一个直接子元素: 元素.lastElementChild
b. 兄弟关系: 2种
1). 元素的前一个兄弟: 元素.previousElementSibling
2). 元素的后一个兄弟: 元素.nextElementSibling
(3). 按HTML特征查找：
如果用一个特征就能找到想要的元素，就用按HTML特征查找
4个方法:
a. 按id查找:
var 一个元素对象=document.getElementById("id名");
b. 按标签名查找:
var 类数组对象=任意父元素.getElementsByTagName("标签名")
c. 按class名查找:
var 类数组对象=任意父元素.getElementsByClassName("class名")
d. 按name名查找表单元素:
var 类数组对象=document.getElementsByName("name名")
(4). 按选择器查找:
如果通过复杂的查找条件，才能找到想要的元素时，就用按选择器查找:
2个方法:
a. 只查找一个符合条件的元素:
var 一个元素=任意父元素.querySelector("任意选择器")
b. 查找多个符合条件的元素:
var 类数组对象=任意父元素.querySelectorAll("任意选择器")
总结: 查找函数的返回值规律:
1. 如果原函数返回下标位置, 如果找不到，返回-1
2. 如果原函数返回一个数组或一个对象，如果找不到，返回null
3. 如果原函数返回类数组对象，如果找不到返回空类数组对象:
{ length:0 }
2.修改元素: 3种东西可修改
(1). 修改内容: 3种内容可修改:
a. 获取或修改元素的HTML内容:元素.innerHTML
b. 获取或修改元素的纯文本内容:元素.textContent
c. 获取或修改表单元素的值:表单元素.value
(2). 修改属性: 3种
a. 字符串类型的HTML标准属性: 2种:
1). 旧核心DOM: 4个函数
i. 元素.getAttribute(“属性名”);
ii. 元素.setAttribute(“属性名”, “属性值”)
iii. var bool=元素.hasAttribute(“属性名”)
iv. 元素.removeAttribute(“属性名”)
优点: 万能, 缺点: 繁琐
2). 新HTML DOM:
i. 元素.属性名
ii. 元素.属性名=“属性值”
iii. 元素.属性名!==""
iv. 元素.属性名=""
优点: 简单, 缺点: 不万能
b. bool类型的HTML标准属性：
1). 不能用旧核心DOM4个函数修改
2). 只能用HTML DOM的"元素.属性名"方式获取或修改，且值为bool类型
c. 自定义扩展属性:
1). 何时: 2种
i. 代替id、class、元素等选择器作为查找触发事件的元素的条件
ii. 在客户端元素上临时缓存业务数据
2) HTML中: <元素 data-自定义属性名=“属性值”>
3). js中: 2种: （不能用.访问）
i. 核心DOM:
var 属性值=元素.getAttribute(“data-自定义属性名”)
元素.setAttribute(“data-自定义属性名”,“属性值”)
ii. HTML5标准: 元素.dataset.自定义属性名
(3). 修改样式:
a. 修改元素的内联样式:
元素.style.css属性="属性值"
b. 获取元素的完整样式:
var style=getComputedStyle(元素对象);
style.css属性
计算后的样式都是只读的
c. 批量修改元素的样式时，都用class:
元素.className="class名"
3. 添加/删除元素:
(1). 只添加一个新元素: 3步
a. 创建一个新元素:
var 新元素=document.createElement("标签名")
b. 为元素设置关键属性:
新元素.属性名="属性值";
c. 将新元素添加到DOM树: 3种:
1). 末尾追加: 父元素.appendChild(新元素)
2). 在某个元素前插入: 父元素.insertBefore(新元素, 现有元素)
3). 替换某个元素: 父元素.replaceChild(新元素, 现有元素)
(2). 优化: 尽量减少操作DOM树的次数，2种:
a. 如果同时添加父元素和子元素，应该先将子元素添加到父元素，最后再将父元素一次性添加到DOM树
b. 如果父元素已经在页面上，要添加多个平级子元素。应该利用文档片段对象
1). 创建文档片段对象:
var frag=document.createDocumentFragment()
2). 将子元素添加到文档片段对象中:
frag.appendChild(子元素)
3). 最后将文档片段对象一次性添加到DOM树上父元素下
父元素.appendChild(frag);
(3). 删除元素:
父元素.removeChild(子元素)
4. HTML DOM常用对象:（了解即可）
(1). var img=new Image()
(2). table
a. table管着行分组:
1). 添加行分组:
var thead=table.createTHead()
var tbody=table.createTBody()
var tfoot=table.createTFoot()
2) 删除行分组:
table.deleteTHead();
table.deleteTFoot()
3). 获取行分组:
table.tHead
table. tFoot
table.tBodies[i]
b. 行分组管着行:
1). 添加行:
i. 任意行插入新行: var tr=行分组.insertRow(i);
ii. 开头插入新行: var tr=行分组.insertRow(0)
iii. 末尾追加新行: var tr=行分组.insertRow()
2). 删除行:
table.deleteRow(tr.rowIndex)
3). 获取行:
行分组.rows[i]
c. 行管着格:
1). 添加格:var td=tr.insertCell()
2). 删除格: tr.deleteCell(i)
3). 获取格: tr.cells[i]
(3). form:
a. 获取form元素: document.forms[i]
b. 获取form中的表单元素:
1). 标准: form.elements[i或id或name名]
2). 简写: 如果有name属性: form.name名
c. 让表单元素自动获得焦点: 表单元素.focus()
二. 事件:
1. 绑定事件: js中:
(1). 一个事件只绑定一个处理函数
元素.on事件名=function(){ ... }
(2). 一个事件绑定多个处理函数
元素.addEventListener("事件名", 事件处理函数)
(3). 移除一个事件监听:
元素.removeEventListener("事件名", 原事件处理函数对象)
2. 事件模型: 捕获，目标触发，冒泡
3. 事件对象:
(1). 获得事件对象:
元素.on事件名=function(e){ ... }
(2). 阻止冒泡:
e.stopPropagation()
(3). 当多个子元素都要绑定相同事件时，利用冒泡/事件委托3步:
a. 事件只在父元素上绑定一次
b. e.target代替this
c. 判断e.target的任意特征是否是我们想要的元素
(4). 阻止元素默认行为:
e.preventDefault()
(5). 获取鼠标位置:
a. 相对于屏幕左上角的x，y坐标:
e.screenX , e.screenY
b. 相对于文档显示区左上角的x，y用坐标:
e.clientX , e.clientY
c. 相对于事件所在元素左上角的x，y坐标:
e.offsetX e.offsetY
(6). 页面滚动事件:
window.onscroll=function(){
var scrollTop=document.documentElement.scrollTop||
document.body.scrollTop
//如果scrollTop>多少，就执行xx操作
//否则就恢复原样
}
1319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
