DOM
DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树
HTML DOM Tree
DOM标准规定HTML文档中的每个成分都是一个节点(node):
- 文档节点(document对象):代表整个文档
- 元素节点(element 对象):代表一个元素(标签)
- 文本节点(text对象):代表元素(标签)中的文本
- 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
- 注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML:
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找标签
直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByClassName 根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集
简介查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
节点操作
创建节点
document.createElement(tagName)
var divEle = document.createElement("div")
添加节点
var divEle = document.createElement("div");
var div2Ele = document.createElement("div");
// appendChild() 追加一个节点
divEle.appendChild(div2Ele)
// 追加一个节点并放在某个节点的前面
divEle.appendChild(div2Ele, 某个节点)
删除节点
通过父元素调用来删除
divEle.removeChild(eleName)
替换节点
divEle.replaceChild(eleName, 某个节点)
属性节点
var divEle = document.getElementById('nav');
divEle.innerText // 获取节点的文本值
divEle.innerHTML // 获取节点的html标签
divEle.innerText = 'this is tag' // 设置节点的文本值
divEle.innerHTML = "<h1> Title </h1>" // 设置节点的html标签
属性操作
var divEle = document.getElementById('nav');
divEle.setAttribute("age", "18") // 给节点设置属性和值
divEle.getAttribute("age") // 获取节点和值
divEle.removeAttribute("age") // 删除节点
// 自带的属性可以直接.属性名来获取和设置
** .value获取值**
elementNode.value
只适用于一下几个标签
input
select
textarea
** class的操作**
className // 获取所有样式类名(字符串)
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
classList.contains(cls) // 存在返回true,否则返回false
classList.toggle(cls) // 存在就删除,否则添加
指定css操作
// 中间没有横线的直接.属性名
obj.style.margin
obj.style.width
obj.style.height
// 中间有横线的,去除横向,第二个单词首字母大写
obj.style.borderLeft
obj.style.backgroundImage
obj.style.fontFamily
事件
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。
常用事件
// 鼠标单击事件
onClick // 单击事件 用户点击某个标签时触发
ondblclick // 双击事件 用户双击某个标签时触发
// 输入框事件
onfocus // 输入框获得焦点时触发
onblur // 输入框失去焦点时触发
onchange // 输入框内容被改变时触发
// 键盘事件
onkeydown // 某键被按下触发
onkeypress // 某键被按下并松开触发
onkeyup // 某键被松开触发
// 鼠标移动事件
onmousedown // 鼠标按钮被按下触发
onmousemove // 鼠标移动时触发
onmouseout // 鼠标离开某个元素触发
onmouseover // 鼠标移动到某个元素触发
onselect // 文本框中的文本被选中时触发
onsumbit // 确认按钮被点击时触发
绑定事件
方式一:
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
<!-- this是实参,表示触发事件的当前元素。 -->
方式二:
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
定时器案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
var t;
function showTime() {
var i1Ele = document.getElementById('i1');
var time = new Date();
i1Ele.value = time.toLocaleString();
}
showTime();
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function (ev) {
if (!t){
t = setInterval(showTime,1000)
}
};
var b2Ele = document.getElementById('b2');
b2Ele.onclick = function (ev) {
clearInterval(t);
t = undefined
};
</script>
</body>
</html>
搜索框案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框示例</title>
</head>
<body>
<input id="d1" type="text" value="请输入关键字" onblur="blur()" onfocus="focus()">
<script>
function focus(){
var inputEle=document.getElementById("d1");
if (inputEle.value==="请输入关键字"){
inputEle.value="";
}
}
function blur(){
var inputEle=document.getElementById("d1");
var val=inputEle.value;
if(!val.trim()){
inputEle.value="请输入关键字";
}
}
</script>
</body>
</html>
select联动:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
var p = document.getElementById("province");
var c = document.getElementById("city");
for (var i in data) {
var optionP = document.createElement("option");
optionP.innerHTML = i;
p.appendChild(optionP);
}
p.onchange = function () {
var pro = (this.options[this.selectedIndex]).innerHTML;
var citys = data[pro];
// 清空option
c.innerHTML = "";
for (var i=0;i<citys.length;i++) {
var option_city = document.createElement("option");
option_city.innerHTML = citys[i];
c.appendChild(option_city);
}
}
</script>
</body>
</html>
window.onload
当我们给页面上的元素绑定事件的时候,必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时,文档中的所有对象都位于DOM中,并且所有图像,脚本,链接和子框架都已完成加载。
注意:.onload()函数存在覆盖现象。