JavaScript 基础 【DOM】
什么是 DOM
- DOM，全程是 Document Object Model 文档对象模型。
- JS 中通过 DOM 来对 HTML 文档进行操作。只要了解 DOM 就可以随心所欲的操作 WEB 页面。
- 文档：文档表示的就是整个 HTML 网页文档
- 对象：对象表示将网页中的每一个部分都转换成了一个对象
- 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。
模型
节点
节点：Node – 构成 HTML 文档最基本的单元。
常用节点分为四类：
- 文档节点：整个 HTML 文档
- 元素节点：HTML 文档中的 HTML 标签
- 属性节点：元素的属性
- 文本节点：HTML 标签中的文本内容
事件
事件：文档或浏览器窗口中发生的一些特定的交互瞬间。（点击按钮、鼠标移动、关闭窗口）
JavaScript 与 HTML 之间的交互时通过事件实现的。
放置一个普通按钮
<button id="btn">我是一个按钮</button>
获取按钮对象
var btn = document.getElementById("btn");
可以为按钮的对应事件帮定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用
绑定一个单击事件
像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick = function(){
alert("别点我！！！");
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("别点我！！！");
}
</script>
</head>
<body>
</body>
</html>
DOM 的基本方法
获取元素节点
通过 document 对象调用
- getElementById()
通过 id 属性获取一个元素节点对象 - getElementsById()
通过标签名获取一组元素节点对象
这个方法会给我们返回一个类数组对象，将所有查询到的元素封装到对象中
即使查询到的元素只有一个，也会封装到一个对象中
- getElementsByName()
通过 name 属性获取一组元素节点对象
获取元素节点的子节点
通过具体的元素获取
- getElementByTagName()
方法，返回当前节点的指定标签名后代节点 - childNodes
属性，表示当前节点的所有子节点 - firstChild
属性，表示当前节点的第一个子节点 - lastChild
属性，表示当前节点的最后一个子节点
获取父节点和兄弟结点
通过具体的节点调用
- paraentNode
属性，表示当前节点的父节点 - previousSibling
属性，表示当前节点的前一个兄弟节点 - nextSibling
属性，表示当前节点的后一个兄弟节点
DOM 增删改
-
createElement()
用于创建一个元素节点对象
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回 -
createTextNode()
可以创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 -
appendChild()
向一个父节点中添加一个新的子节点
用法：父节点.appendChild(子节点) -
insertBefore()
向指定子节点之前插入新的子节点
语法：父节点.insertBefore(指定子节点，新的子节点) -
replaceChild()
使用指定的子节点替换已有的子节点
语法：父节点.replaceChild(指定子节点，已有子节点) -
removeChild()
删除子节点
语法：父节点.removeChild(子节点)、子节点.parentNode.removeChild(子节点) -
innerHTML()
获取子节点中的 HTML 内容
语法：父节点.innerHTML(子节点)
使用 DOM 操作样式
语法：元素.style.样式名 = 样式值
注意：如果 CSS 的样式名中含有 -
这样的名称在 JS 中是不合法的，如：background-color
需要将这样的样式名修改为驼峰命名法
去掉-，然后将-后的字母大写
我们通过 style 属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过 JS 修改的样式往往立即显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
box1.style.width = "300px";
box1.style.backgroundColor = "yellow";
}
}
</script>
</head>
<body>
<button id="btn1">点我!</button>
<div id="box1">
</div>
</body>
</html>
