DOM
DOM：Document Object Model (文档对象模型)
1. DOM的作用
-
针对HTML 和xml文档的编程接口
- HTML：超文本标记语言，用于表示网页界面
- xml：扩展型标记语言，用于存储信息
-
中立于平台和语言，允许程序和脚本动态的访问和更新文档的内容、结构和样式。(页面中所有元素的增删改查都可以做到)
2. Node类型
2.1 节点类型查询及返回值
- 基本属性
- nodeType：节点类型
- nodeName：节点名
- nodeVlaue：节点值
<p id="mypage">hello,node</p>
<script>
//1.获取元素的方法 id--> <p>元素节点
var myPage = document.getElementById("mypage");
//2.读取myPage下面的信息-->文本节点
var textNode = myPage.childNodes[0];
//打印两个不同的节点信息
console.log("myPage:"+myPage.nodeType+","+myPage.nodeName+","+myPage.nodeValue);
//--->myPage:1,P,null
console.log("textNode:"+textNode.nodeType+","+textNode.nodeName+","+textNode.nodeValue);
//--->textNode:3,#text,hello,node
</script>
1.nodeType-节点类型（常数）（共12种，以下两种为常用）：
| NodeType | 对应节点名称(Node对象中的常量) |
|---|---|
| 1 | ELEMENT_NODE 元素节点 |
| 3 | TEXT_NODE 文本节点 |
2.nodeName-nodeValue:节点名-节点值（共12种，以下两种为常用）：
| 节点类型 | nodeName的返回值 | nodeValue的返回值 |
|---|---|---|
| Element | element name(p/div/span...) | null |
| Text | #text | 节点内容（文本） |
2.2 节点关系
- childNodes：保存节点下面所有的子节点（包括空格和换行），使用一个NodeList对象保存（有序数组）；
- 使用firstChild/lastChild/nextSibling/previousSibling所定位的节点都包括空格和换行；
- 使用children[n]是不包括空格和换行的，使用更方便。
2.3 节点操作
2.3.1 查找元素（使用Document对象）
- document.getElementById(idName)：根据id名查找元素，Id属性在一个页面内必须唯一，返回一个对象（整个元素标签）
- getElementsByName(name)：根据name属性获取元素对象集合（checkbod,radio）
- getElementsByTagName(tagName)：根据标签名获取元素对象集合
- getElementsByClassName(className)：根据class属性值获取元素对象集合
也可以使用其他节点调用查元素方法，只能查到自己后代（儿子，孙子）的元素。
2.3.2 增加元素
-
document.createElement(标签名)：创建新元素（这个标签名在HTML文档中不区分大小写，在XML、XHTML中是区分大小写的）；
-
appendChild():在父元素的childNodes列表的末尾添加一个节点
<body>
<ul id="fruits">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<!-- 在ul中增加一个li元素-->
<script>
//获取ul元素
var ul = document.getElementById("fruits");
//创建li标签
var li = document.createElement("li");
//添加文本
// li.appendChild(document.createTextNode("芒果"));
li.innerHTML = "芒果";
//将li添加到ul中
ul.appendChild(li);
</script>
</body>
** 需要使用父元素来追加子节点
案例：使用原生js写下拉框联动
<script>
function $(idName){
return document.getElementById(idName);
}
window.onload = function(){
var provinces = ["---请选择---","江苏","安徽","广东","山东"];
var cities = [["---请选择---"],["南京","无锡","苏州"],["合肥","芜湖","马鞍山"],["广州","韶关","深圳"],["济南","青岛","淄博"]];
var span = $("province");
//1.创建select元素
var selectEle = document.createElement("select");
//1.1 将select添加到span中
span.appendChild(selectEle);
//2.循环创建option元素
for(var i in provinces){
var op = document.createElement("option");
//2.1.给option添加value
op.setAttribute("value",i);
//2.2.给option添加文本
op.innerHTML = provinces[i];
//2.3 将op加入到select中
selectEle.appendChild(op);
}
//创建市级联动下拉框
//1.给select添加onchange事件
selectEle.onchange = function(){
var citySpan = $("city");
//清空span中的数据
citySpan.innerHTML = "";
//2.创建select
var citySelect = document.createElement("select");
//3.循环创建option
var myCity = cities[this.value];//所选省份的下标
for(var i in myCity){
//方式一：
// var op = document.createElement("option");
// op.value = i;
// op.innerHTML = myCity[i];
// citySelect.appendChild(op)
//方式二：
//通过option对象创建下拉框选项
var op = new Option(myCity[i],i);
//将option加到select中
citySelect.options.add(op);
}
//将select加到span中
citySpan.appendChild(citySelect);
}
}
</script>
<body>
<span id="province">
<!-- <select>
<option value="0">江苏</option>
<option value="1">安徽</option>
<option value="2">广东</option>
<option value="3">山东</option>
</select> -->
</span>
<span id="city"></span>
</body>
运行结果：
- insertBefore(新节点，老节点)
2.3.3 删除节点
- removeChild(removeNode)：仅限删除单个节点
3 Element类型
用于表现XML或HTML元素，提供了对元素标签名、子节点及特性的访问。
3.1 直接获取HTML元素属性
<div id="myDiv" class="bd" title="body text" lang="en" dir="ltr"></div>
<script>
//获取元素
var div = document.getElementById("myDiv");
//获取属性信息
console.log(div.id);
console.log(div.className);
console.log(div.title);
console.log(div.lang);
console.log(div.dir);
//设置属性信息
div.id = "otherId";
div.className = "newName";
...
</script>
3.2 通过方法获取元素属性
操作特性的DOM方法主要有三个：getAttribute()、setAttribute() 和 removeAttribute()
-
getAttribute(属性名)：获取元素属性值
-
setAttribute(属性名，属性值)：修改属性值
-
removeAttribute(属性名)：删除属性
3.3 操作样式表
案例：当鼠标放入区域内，图形变大、变色，鼠标移出，样式恢复
涉及内容：鼠标的覆盖事件，改变样式
样式属性参考W3School：https://www.w3school.com.cn/jsref/dom_obj_style.asp
<style>
.normal {
width: 100px;
height: 100px;
background-color: green;
border-radius: 10%;
text-align: center;
line-height: 100px;
}
.bigger {
width: 150px;
height: 150px;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 150px;
}
</style>
<body>
<div id="divStyle" class="normal">我是div</div>
<script>
var div = document.getElementById("divStyle");
//方式一，通过鼠标事件，直接改变样式
//当鼠标进入的时候，改变样式
div.onmouseenter = function(){
div.style.width = "150px";
div.style.height = "150px";
div.style.backgroundColor = "red";
div.style.borderRadius = "50%";
div.style.textAlign = "center";
div.style.lineHeight = "150px";
}
//当鼠标移出的时候，恢复样式
div.onmouseleave = function(){
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "green";
div.style.borderRadius = "10%";
div.style.textAlign = "center";
div.style.lineHeight = "100px";
}
//方式二：改变className属性，style提前写好在样式表中
div.onmouseenter = function(){
div.className = "bigger";
}
div.onmouseleave = function(){
div.setAttribute("class","normal");
}
</script>
</body>
显示效果：
<---->
4 Text类型
文本节点由Text类型表示，不能包含html代码
- createTextNode(textContent)：创建文本节点
//1.创建元素
var element = document.createElement("div");
element.className = "message";
//2.创建文本节点
var textNode = document.createTextNode("hello World");
//3.元素添加文本
element.appendChild(textNode);
//4.body添加元素
document.body.appendChild(element);
//5.获取div元素中的文本信息
console.log(element.nodeValue);
浙公网安备 33010602011771号