DOM

最新推荐文章于 2022-07-04 20:19:44 发布

wangxizhen123

最新推荐文章于 2022-07-04 20:19:44 发布

阅读量341

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/wangxizhen123/article/details/76574931

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

访问方法(最常用的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 οnmοusemοve="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.2. 获取节点对象案例

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 案例

显示页面任意一个节点对象的所有子节点的nodeName、nodeType、nodeValue

1.3.1 属性操作练习

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" οnclick="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" οnclick="checkAll(this)"  /> 全选<br />
<input type="button" value="总金额：" οnclick="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" 的节点：

varx=document.getElementById("maindiv");

x.parentNode.removeChild(x);

wangxizhen123

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
DOM

1.1. DOM简介全称Document Object Model，即文档对象模型。 DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面
复制链接

扫一扫