网站首页 > 知识剖析 正文
1. DOM
1.1. DOM简介
全称Document Object Model，即文档对象模型。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
组建好之后，按照树的结构将页面显示在浏览器的窗口中。
1.2. 节点层次
HTML网页是可以看做是一个树状的结构，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
节点最多有一个父节点，可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document
代表当前页面的整个文档树。
访问属性
all
forms
images
links
body
访问方法(最常用的DOM方法)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
// 获取dom 树, 获取document 对象.
var dom = window.document;
// all 获取页面中所有的标签节点 ,注释和文档类型约束.
function testAll() {
var allArr = dom.all;
alert(allArr.length);
for (var i = 0; i < allArr.length; i++) {
//获取节点名称
alert(allArr[i].nodeName);
}
}
// anchors 获取页面中的所有的锚连接.
function testAnchors() {
var anArr = dom.anchors;
alert(anArr.length);
}
// froms 获取所有的form 表单对象
function testForms() {
var formArr = dom.forms;
alert(formArr.length);
alert(formArr[0].nodeName);
}
// images
function testImages() {
var imageArr = dom.images;
alert(imageArr.length);
}
// links 获取页面的超链接.
function testLinks() {
var linkArr = dom.links;
//alert(linkArr.length);
for (var i = 0; i < linkArr.length; i++) {
//alert(linkArr[i].nodeName);
}
for (var i in linkArr) {
alert(i);
}
}
//testLinks();
// 获取页面的Body
var body = dom.body;
alert(body.nodeName);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<img src="xxx" alt="这是一个美女"/>
<a href="http://www.baidu.com">百度一下</a>
<a href="http://www.google.com">百度两下</a>
<a href="http://www.baigu.com">百谷一下</a>
<a name="one"></a>
<a name="two"></a>
<form>
<label>姓名:</label><!--默认不写type 就是文本输入框-->
<input type="text"/>
</form>
</body>
</html>1.3. 获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。
Var dom = window.document;
function testByTagName() {
var iptArr = dom.getElementsByTagName("input");
for (var i = 0; i < iptArr.length; i++) {
alert(iptArr[i].value);
}
}// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,
//window.onload = testByTagName;
//2，得到所有标签id为"username"的结果。获取旧value值并设置value值
function testById() {
var user = dom.getElementById("username");
alert(user.value);
user.value = "rose";
}
//testById();//3. 获取所有标签name 为like的元素.获取value值.
function testByName() {
var likeArr = dom.getElementsByName("like");
for (var i = 0; i < likeArr.length; i++) {
alert(likeArr[i].value);
}
}
testByName();1.3.1. 案例
显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue
1.3.2. 属性操作练习
1，写一个form，其中有多个checkbox。
2，获取所有选中的数量。
3，实现全选与全部选的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function getSum()
{
/*
需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。
思路：
1，先获取所有的checkbox对象。
2，对这些对象进行遍历。判断哪个对象被选中。
3，对被选中对象的金额进行累加。
4，显示在按钮右边。
*/
var items = document.getElementsByName("item");
var sum = 0;
for(var x=0; x<items.length; x++)
{
if(items[x].checked)
{
sum += parseInt(items[x].value);
}
}
var str = sum+"元";
document.getElementById("sumid").innerHTML = str.fontcolor('red');
}
function checkAll(node){
/*
需求：通过全选checkbox，将其他条目都选中。
思路：
只要将全选checkbox的checked状态赋值给其他的item checked状态即可。
*/
//var allNode = document.getElementsByName("all")[index];
var items = document.getElementsByName("item");
for(var x=0; x<items.length; x++){
items[x].checked = node.checked;
}
}
</script>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)" /> 全选<br />
<input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>
</body>
</html>1.4. 通过节点关系查找节点
从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）
示例1：
firstChild属性最普遍的用法是访问某个元素的文本：
var text=x.firstChild.nodeValue;
示例2：
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
1.4.1. 获取节点对象的信息
每个节点都包含的信息的，这些属性是：
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
- nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素，例<div>..</div>
文本 3 标签元素中的文本
注释 8 表示为注释
- nodeName
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
- nodeValue
对于文本节点，nodeValue 属性是所包含的文本。
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//节点和节点之间的关系.
//获取dom树
var dom = window.document;
//获取指定id 的标签节点.
function test() {
var form = dom.getElementById("form1");
//获取父节点.
//alert(form.parentNode.nodeName);
// 获取子节点(Node 包含 文本,注释,标签)
var childArr = form.childNodes;
//alert(childArr.length);
/*
for (var i = 0; i < childArr.length; i++) {
alert(childArr[i]);
}
*/
// 获取第一个孩子.
var first = form.firstChild;
//alert(first);
//最后一个孩子.
var last = form.lastChild;
//alert(last);
// 获取下兄弟(获取弟弟)
var sibling = form.nextSibling;
//alert(sibling.nodeName);
// 获取大哥
var previous = form.previousSibling;
alert(previous.nodeName);
}
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
<a>哈哈</a>
<form id="form1">
<label>姓名:</label>
<input type="text" />
</form>
</body>
</html>1.5. 节点操作
1.5.1. 创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。 // 参数1：要插入的节点 参数 2：插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
创建节点：
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
添加节点到文档树上:
elt.appendChild(e) 添加元素到elt中最后的位置 把元素添加最后一个子节点的后面。
elt.insertBefore(new, child); 添加到elt中，child之前。
// 参数1：要插入的节点 参数2：插入目标元素的位置
*/
/*
function add(){
//
var inputNode = document.createElement("input"); // 创建一个节点的对象
inputNode.setAttribute("type","file"); //给新节点设置type的属性值。
var body = document.getElementsByTagName("body")[0];
body.appendChild(inputNode); //把新节点添加到body体中。
}
*/
var count = 1;
function add(){
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
var inputNode = document.createElement("input");
inputNode.setAttribute("type","button");
inputNode.setAttribute("value",count+"");
count++;
tdNode.appendChild(inputNode);
trNode.appendChild(tdNode);
//trNode添加 到指定 的位置上。
var tbodyNode = document.getElementsByTagName("tbody")[0];
//tableNode.appendChild(trNode);
var button1 = document.getElementById("b1");
tbodyNode.insertBefore(trNode,button1); // 注意： 使用obj.insertBefore(o1,o2)这个方法的时候
//obj必须是o1,o2的直接父节点。
//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
<tr>
<td>
<input type="button" value="0">
</td>
</tr>
<tr id="b1">
<td>
<input type="button" value="添加" onclick="add()">
</td>
</tr>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function addFile(){
var trNode = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML="<input type='file'/>";
td2.innerHTML="<a href='#' onclick='deleteFile(this)'>删除附件</a>"
trNode.appendChild(td1);
trNode.appendChild(td2);
//把trNode添加 到添加按钮上面
var addButton = document.getElementById("addButton");
var tbody = document.getElementsByTagName("tbody")[0];
tbody.insertBefore(trNode,addButton);
}
function deleteFile(deleteNode){
//找到要删除的tr a---->td---->tr
var trNode = deleteNode.parentNode.parentNode; //获取到了要删除的tr节点。
// 找 到trNode的父节点
var tbodyNode =document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(trNode);
//trNode.removeNode(true); // removeNode() 在firefox上不 支持，在ie支持。
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table>
<tr>
<td><input type="file"></td>
<td><a href="#" onclick="deleteFile(this)">删除附件</a></td>
</tr>
<tr id="addButton">
<td>
<input type="button" value="添加附件" onclick="addFile()"/>
</td>
</tr>
</table>
</body>
</html>猜你喜欢
- 2024-11-25 Chrome 108 发布新的 CSS 布局单位升级
- 2024-11-25 简单小程序:登录页面(html)
- 2024-11-25 通过CSS控制PC端的TABLE在移动端展示
- 2024-11-25 利用 Python 开发桌面小工具，实现htm自动转为excel文件
- 2024-11-25 团结一致，尽显风采丨TR02807班HTML项目验收
- 2024-11-25 想学HTML该从何入手?web前端HTML终极指南
- 2024-11-25 超实用压力测试工具-ab工具
- 2024-11-25 前端入门二(html)
- 2024-11-25 JavaScript中的DOM
- 2024-11-25 HTML网页制作常用标签及说明——前端开发入门
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)