Dom 和 BOM的知识点

2023-10-03 20:08:34

1. 查找元素:

(1). 不需要查找就可直接获得的元素对象: 4种:

document.documentElement ——
document.head ——
document.body ——
document.forms[i] ——

(2). 如果已经获得一个元素对象，找周围附近的元素对象时，就用按节点间关系查找：2大类关系，6个属性

a. 父子关系: 4种
1). 元素的父元素:  元素.parentElement或元素.parentNode
2). 元素下的所有直接子元素: 元素.children
3). 元素下的第一个直接子元素: 元素.firstElementChild
4). 元素下的最后一个直接子元素: 元素.lastElementChild
b. 兄弟关系: 2种
1). 元素的前一个兄弟: 元素.previousElementSibling
2). 元素的后一个兄弟: 元素.nextElementSibling

(3). 如果用一个特征就能找到想要的元素，就用按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
如果原函数返回一个数组或一个对象，如果找不到，返回null
如果原函数返回类数组对象，如果找不到返回空类数组对象:
{ 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()

BOM:

1. window:

(1). 获得窗口大小:
a. 获得完整窗口大小:
window.outerWidth和window.outerHeight
b. 获得文档显示区大小:
window.innerWidth和window.innerHeight
(2). 打开和关闭窗口:
window.open()和window.close()

2. 打开新链接4种方式:

(1). 在当前窗口打开，可后退

a. html: <a href="url" target="_self">
b. js: window.open("url", "_self");

(2). 在当前窗口打开，禁止后退

a. js: location.replace("新url")

(3). 在新窗口打开，可同时打开多个

a. html: <a href="url" target="_blank">
b. js: window.open("url", "_blank");

(4). 在新窗口打开，只能打开一个

a. html: <a href="url" target="自定义窗口名">
b. js: window.open("url", "自定义窗口名")

3. history:

(1). 前进: history.go(n)
(2). 后退: history.go(-n)
(3). 刷新: history.go(0)

4. location:

(1). 属性: 分段获得url中各个部分:
a. location.href 完整url
b. location.protocol 协议
c. location.host 主机名+端口号
d. location.hostname 主机名
e. location.port 端口号
f. location.pathname 相对路径
g. location.search ?及其之后的查询字符串参数列表
h. location.hash #锚点地址
(2). 方法:
a. 在当前窗口打开，可后退：
location.assign(“新url”) 或 location.href=“新url”
b. 在当前窗口打开，禁止后退:
location.replace(“新url”)
c. 刷新: location.reload();

5. navigator

(1). 查看浏览器的名称和版本号: navigator.userAgent
(2). 查看浏览器中安装的插件列表: navigator.plugins

总结: 事件:

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.οnscrοll=function(){
var scrollTop=document.documentElement.scrollTop||
document.body.scrollTop
//如果scrollTop>多少，就执行xx操作
//否则就恢复原样
}

码农公寓