document对象
DOM概述
DOM概述、DOM节点树、DOM操作
读取、修改
节点信息、元素节点的内容、节点属性、元素节点的样式
查询
查询节点、根据元素的id查询节点、根据层次查询节点、根据标签名查询节点、根据 name查询节点
增加
创建新节点、添加新节点
删除
删除节点
DOM概述
Document Object Model：文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型
通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML
JavaScript能改变页面中的所有HTML元素、属性
JavaScript能改变页面中的所有CSS样式
JavaScript能对页面中的所有事件作出反应
DOM节点树
DOM提供了如下操作
查找节点、读取节点信息、修改节点信息、创建新节点、删除节点
节点信息：
nodeName：节点名称
元素节点和属性节点：标签或属性名称
文本节点：#text
文档节点：#document
nodeType：节点类型
返回值
元素节点：返回1
属性节点：返回2
文本节点：返回3
注释节点：返回8
文档节点：返回9
元素节点的内容：
innerText：设置或获取位于对象起始和结束标签的文本
innerHTML：设置或获取位于对象起始和结束标签内的HTML
节点属性：
getAttribute()方法：根据属性名称获取属性的值
setAttribute()、removeAttribute()
将HTML标记、属性和CSS都对象化
元素节点的样式：
style属性
node.style.color
node.style.fontsize
className属性
Demo
<script>
//onload是页面加载事件，在页面加载完成时自动触发，触发时调用对应的匿名函数
window.onload = function(){
//1.读取节点的名称及类型
var p1 = document.getElementById(“p1”);
console.log(p1.nodeName); ---> P
console.log(p1.nodeType); ---> 1
//2.读写节点的内容(双标签中间的内容)
//2.1 innerHTML(支持标签)
console.log(p1.innerHTML); ---> DOM操作可以<b>读写</b>节点
p1.innerHTML = “DOM操作可以<u>读写</u>节点”;
//2.2innerText(不支持标签)
var p2 = document.getElementById(“p2”);
console.log(p2.innerText); ---> DOM操作可以查询节点
p2.innerText = “DOM操作可以<i>查询</i>节点”;
//3.读写节点的值
//只有如下表单控件有值：input textarea select input.value
var s1 = document.getElementById(“s1”);
console.log(s1.value); ---> Beijing
//4.读写节点的属性
//4.1通过方法读写（麻烦、万能）
var img = document.getElementById(“i1”);
console.log(img.getAttribute(“src”)); ---> 1.jpg
img.setAttribute(“src”, “2.jpg”);
img.removeAttribute(“src”);
//4.2通过属性名读写（简单、量少）
//举例：
//读：span.className()
//写：span.className = “OK”;
//只有class style id可以通过这种方式读写，其他属性是非标注的API
//即：新版浏览器可以使用，但是旧版浏览器不支持(如：a.ref)
var a = document.getElementById(“a1”);
console.log(a.style); ---> CSSStyleDeclaration{...}
a.style.color = “blue”;
}
</script>
<body>
<p id=”p1”>DOM操作可以<b>读写</b>节点</p>
<p id=”p2”>DOM操作可以<b>查询</b>节点</p>
<p id=”p3”>DOM操作可以<b>增删</b>节点</p>
<select id=”s1”>
<option>Beijing</option>
</select>
<p>
<img src=”1.jpg” id=”i1”>
</p>
<a href =“#” style=”color:red” id=”a1”>Top</a>
</body>
case1:picture turn
功能实现：鼠标离开照片，切换照片，鼠标悬停，停止切换
<style>
div { border/width/height }
.show{
display: inline-block;
}
.hide {
display: online;
}
</style>
<script>
var id;
//轮播次数
var n=0;
function picture_turn{
id = setInterval(function(){
n++;
//获取所有图片,s复数，不止一个节点，得到的是一个节点
var imgs = document.getElementsByTagName(“img”);
//遍历、隐藏
//如果imgs.className=”hide”,除第一张图片显示，其他隐藏，然后逐个显示， //垂直显示的块元素
for(var i=0; i<imgs.length; i++){
imgs[i].className = “hide”;
}
var next = n%imgs.length;
imgs[next].className = “show”;
}, 2000);
}
function stop_turn() {
clearInterval(id);
}
</script>
<body>
<!-- onmouseover:鼠标悬停事件，onmouseout:鼠标离开事件 -->
<div onmouseover=”stop_turn;” onmouseover=”onmouseleave();”>
<img src=”1.jpg”/>
<img src=”2.jpg” class=”hide”/>
<img src=”3.jpg” class=”hide”/>
<img src=”4.jpg” class=”hide”/>
</div>
</body>
查询节点
如果需要操作HTML元素，必须首先找到该元素
查询节点的方式：
通过id查询：
document.getElementById()
通过指定的ID来返回元素节点，忽略文档的结构，
查找整个HTML文档中的任何HTML元素
如果id错误，则返回null
通过层次（节点名）查询
parentNode
遵循文档的上下层次结构，查找单个父节点
childNodes
遵循文档的上下层次结构，查找多个子节点
通过标签名查询
document.getElementsByTagName()
根据指定的标签名称返回所有的元素
忽略文档的结构
查找整个HTML文档中的所有元素
如果标签名错误，则返回长度为0的节点列表
返回一个节点列表（数组）
使用节点列表的length属性获取个数
[index]:定位具体的元素
通过name属性查询
document.getElementsByName();
case：search、create、delete
<script>
window.onload = function() {
//根据name查询一组节点
var inputs = document.getElementsByName(“gender”);
console.log(inputs);
//查询父节点
var gz = document.getElementById(“gz”);
var ul = gz.parentNode;
console.log(ul);
//查询子节点
console.log(ul.childNodes);
console.log(ul.getElementsByTagName(“li”));
//查询节点的兄弟
var li = gz.parentNode.getElementsByTagName(“li”);
console.log(li);
}
function f1() {
//创建节点li
var li = document.createElement(“li”);
li.innerHTML = “Hangzhou”;
//追加节点
var ul = document.getElementById(“city”);
ul.appendChild(li);
}
function f2() {
//创建节点
var li = document.createELement(“li”);
li.innerHTML = “Suzhou”;
//插入节点
var ul = document.getElementById(“city”);
var gz = document.getElementById(“gz”);
ul.insertBefore(li, gz);
}
function f3() {
//获取要删除节点的父亲
var ul = document.getElementById(“city”);
//获取要删除的节点
var gz = document.getElementById(“gz”);
//根据父亲删除孩子
ul.removeChild(gz);
}
</script>
<body>
<p>
<input type=”radio” name=”gender”/>male
<input type=”radio” name=”gender”/>female
</p>
<p>
<input type=”button” value=”add” onclick=”f1();”>
<input type=”button” value=”insert” onclick=”f2();”>
<input type=”button” value=”delete” onclick=”f3();”>
</p>
<ul id=”city”>
<li>Beijing</li>
<li>Shanghai</li>
<li id=”gz”>Guangzhou</li>
<li>Shenzhen</li>
<li>Tianjin</li>
</ul>
</body>
增加：
创建新节点
document.createElement(elementName)
elementName:要创建的元素标签名称
返回新创建的节点
添加新节点
parentNode.appendChild(newNode);
追加：新节点作为父节点的最后一个子节点添加
parentNode.insertBefore(newNode, refNode);
refNode:参考节点，新节点位于此节点之前添加
删除：
node.removeChild(childNode)
删除某个子节点
childNode必须是node的子节点
case:创建省市下拉选
功能实现：当改变省份时，重置市
<script>
var cities;
window.onload = function() {
//模拟加载所有的城市
cities = [
[“Shijiazhuang”, “Baoding”, “Langfang”],
[“Jinan”, “Qingdao”, “Weihai”],
[“Nanjing”, ”Suzhou”, “Wuxi”]
];
}
function chg() {
//获取选择的省份（序号）
var s1 = document.getElementById(“province”);
var index = s1.value;
//获取省份对应的城市
var p_cities = cities[index];
//删除旧的城市
var s2 = document.getElementById(“city”);
/*
//倒序删除，若正序：第一次删除1，原2会变成1，第二次删除2，原3被删除。 //所以不能全部删除
var options = s2.getElementsByTagName(“option”); //逐条删除
for(var i=p_cities.length; i>=1; i--){
s2.removeChild(options[i]);
}
*/
//当做内容
s2.innerHTML = “<option>please choose</option>”;
//追加新的城市
if(p_cities) { //“请选择时为空”
for(var i=0; i<p_cities.length; i++){
var option = document.createElement(“option”);
option.innerHTML = p_cities[i];
s2.appendChild(option);
}
}
}
</script>
<body>
Province:
<select>
<option onchange=”chg();” id=”province”>
<option value=”-1”>please choose</option>
<option value=”0”>Jiangsu</option>
<option value=”1”>Zhejiang</option>
<option value=”2”>Heilongjiang</option>
</select>
City:
<select id=”city”>
<option>please choose</option>
</select>
</body>
Province:
please choose
Jiangsu
Zhejiang
Heilongjiang
City:
please choose
网页的function功能没法实现，可以把代码复制下来
1923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
