一. 什么是DOM:Document Object Model
1. 什么是: DOM是专门操作网页内容的一套函数和对象标准
2. 何时: 在浏览器中想操作网页内容,只能用DOM标准提供的函数和对象
3. DOM标准: 由W3C制定并维护,用来统一所有浏览器操作网页的函数和对象标准。只要用DOM操作网页,几乎所有浏览器100%兼容。
4. 如何: 增删改查+事件绑定
二.DOM树
*1. 什么是DOM树: 一个网页中的所有内容,在内存中都是保存在一个树形结构上。
2. 为什么: 树形结构是最直观的保存上下级包含关系的结构。而刚好网页中的元素也是上下级包含关系。
3. 如何:
(1). 只要浏览器获得一个html网页文件,就会先在内存中创建一个document的对象。作为整个网页DOM树的根节点。
(2). 开始扫描html文件中的内容。每扫描到一项内容,就自动在DOM树上对应位置创建一个节点对象,来保存扫描到的元素或文本的内容。
*1查找:
(1). 不需要查找就可直接获得的元素:
document.documentElement
document.head
document.body
(2). 按节点间关系查找:
元素.parentNode :获得指定对象元素的父元素
元素.children:获得指定元素下的所有直接子元素的集合(类数组对象)
元素.firstElementChild : 获得指定元素下第一个直接子元素
元素.lastElementChild : 获得指定元素下最后一个直接子元素
元素.previousElementSibling: 获得指定元素的相邻的前一个兄弟元素
元素.nextElementSibling: 获得指定元素的相邻的后一个兄弟元素
(3).按HTML查找:
var 元素=document.getElementById(“id”) 按id查找一个元素
var 类数组对象=父元素.getElementsByTagName(“标签名”): 按标签名查找多个元素
var 类数组对象=父元素.getElementsByClassName(“class名”): 按class名查找多个元素
var 类数组对象= document.getElementsByName(“name名”): 按name属性查找
(4). 按选择器查找:
var 元素=父元素.querySelector(“选择器”): 查找结果是一个元素
var 类数组对象=父元素.querySelectorAll(“选择器”): 查找结果是多个元素
2.修改
(1). 修改元素内容
元素.innerHTML:获取或修改元素的开始标签到结束标签之间的原始HTML内容
元素.textContent :获取或修改元素的开始标签到结束标签之间的纯文本内容
元素.value:获取或修改表单元素的值
(2). 修改元素属性
核心DOM4个函数: 只能访问字符串类型的标注属性
元素.getAttribute():获得属性(html元素开始标签中的)
元素.setAttribute(): 获得属性(html元素开始标签中的)
元素.hasAttribute() : 判断是否有该属性
元素.removeAttribute(): 移除属性
HTML DOM: 既能访问字符串类型的标准属性,又能访问bool类型的标准属性
元素. 属性
(3). 修改元素样式
① 内联样式: 元素.style.css属性=“值”
a. css属性名要去-,变驼峰
②获取完整样式: 用计算后的样式
a. 什么是计算后的样式: 最终应用到一个元素上的所有样式的集合。
b. 如何获得计算后的完整样式:2步:
1). 获得包含完整样式的对象:
var style=getComputedStyle(元素对象)
//获取 计算后的样式
2). 从style对象中,提取想要的css属性
var 属性值=style.css属性
c. 计算后的样式都是只读,不可修改,怕牵一发而动全身。
//补: 如果做一个死链接
<a href="javascript:;">xxx</a>
/*javascript: 不让a跳转到其他页面,而是在当前页面中执行一条js语句
; 是一条什么也不做的空语句。
vs #,#还是会执行返回页面顶部的操作,并不是什么也不做,
只有javascript:;才表示什么也不做。*/