JS（4）DOM脚本

最新推荐文章于 2024-02-05 17:30:22 发布
最新推荐文章于 2024-02-05 17:30:22 发布
阅读量316 收藏
点赞数 1
分类专栏： jsp/js/struts2框架（前端网页开发） 文章标签： javascript js dom 动态结点 demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aic1999/article/details/82848051
版权

DOM脚本

我个人的理解是，它是代码的结构树，以便于增删改查它的每一个结点。

例如：

 

【示例1】有表如下，试着将表格内的内容one\two\three\four变红色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM节点</title>
</head>
<body>
<h1 id="hd">Heading</h1>
<p id="p">DuanLuo</p>
<table>
<tr>
	<td>One</td>
	<td>Two</td>
	</tr>
	<tr>
	<td>Three</td>
	<td>Four</td>
	</tr>
</table>
<script type="text/javascript">
	var tdElement=document.getElementsByTagName("td");	//一个集合，包含所有名为“td”的结构
	for(i=0;i<tdElement.length;i++){		
		tdElement[i].style.color="red";
	}  
	var container=document.documentElement;	//锁定控件
	alert(container.tagName)	//得到控件名称，看看是不是根目录。输出“HTML”
</script>
</body>
</html>

【输出】

 

【例题】将“DuanLuo”变成绿色，并且在“Heading”后“DuanLuo”前加一行字“Hahahah”

【思路】“DuanLuo”在<p>里面，先定位到这里，改变颜色，然后再找到“Heading”所属的节点对象，在这个节点下面添加新的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM节点</title>
</head>
<body>
<h1 id="hd">Heading</h1>
<p id="p">DuanLuo</p>
<script type="text/javascript">
	//pEle.setAttribute("align","center");	//用代码，使它居中
        //开发时使用第三方插件(用js写的，例如写博客的插件,所以要学会改格式)
	var pEle=document.getElementById("p");
	var h=document.getElementById("hd");
	var pEle2;    //锁定“DuanLuo”节点（在Heading下）
	if(h.nextSibling.nodeType==1){	//如果节点是空白（空行也算节点）。就隔两行。
		pEle2=h.nextSibling
	}else{
		pEle2=h.nextSibling.nextSibling;
	}
	pEle2.style.color='green';    //变成绿色
	
	var newPara=document.createElement("p");	//这个p是标签的类型名字，不是标签的id。
	var txt=document.createTextNode("Hahahaha");//添加文字

	h.parentNode.appendChild(newPara);    //动态添加节点
	newPara.appendChild(txt);
</script>  
<table>
<tr>
	<td>One</td>
	<td>Two</td>
	</tr>
	<tr>
	<td>Three</td>
	<td>Four</td>
	</tr>
</table>
</body>
</html>

【输出】

【解析】由于“DuanLuo”和“Hahahaha”同属<head>标签结点下的同一层次的<p>结点，如果要将同一层次的节点显示的顺序替换，可以使用“document.body.insertBefore(newPara,pEle2);   ”变成下图：

 

【例题】用代码动态创建一个表格，结构如下：

<!DOCTYPE html>
<html>
<head>
	<title>Table Demo</title>
</head>
<body>
	<script type="text/javascript">
		//line 1
		//生成节点元素
		var tab = document.createElement("table");
		tab.setAttribute("border","1");	//定义表格的样式
		var tr = document.createElement("tr");
		var td = document.createElement("td");
		var td2 = document.createElement("td");
		//生成节点的文字
		var cell1 = document.createTextNode("Car");
		var cell2 = document.createTextNode("1000");
		//完成父子关系
		document.body.appendChild(tab);	//body下添加节点
		tab.appendChild(tr);
		tr.appendChild(td);
		tr.appendChild(td2);
		td.appendChild(cell1);
		td2.appendChild(cell2);
		
		 //Line 2
		//生成节点和文本节点
		var tr = document.createElement("tr");
		var td = document.createElement("td");
		var td2 = document.createElement("td");
		var cell3 = document.createTextNode("bike");
		var cell4 = document.createTextNode("200");
		//完成父子关系
		tab.appendChild(tr);
		tr.appendChild(td);
		tr.appendChild(td2);
		td.appendChild(cell3);
		td2.appendChild(cell4);  
	</script>

</body>
</html>

【输出】

aic1999
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM脚本编程
01-20
本书原名《DOM Scripting》，作者Jeremy Keith，讲述的是DOM和JavaScript基本概念和编程思路，如果将它作为一本程序员指南或...Jeremy 同时也是Web标准项目 (webstandards.org)的一个成员并担任DOM脚本任务团队的队副。
js将对象进行排序
weixin_44227577的博客
04-19 9933
这里写自定义目录标题js对象排序打印结果 js对象排序 let list = { 1: { name: '陈七', age: '20', sex: '男', sort: 4 }, 2: { name: '王五', age: '42', sex: '女', sort: 2 }, 3: { name: '赵六', age: '27', sex: '男', ...
js中的数组对象排序
gnolzhao的专栏
10-30 3041
一、普通数组排序　　   　　js中用方法sort()为数组排序。sort()方法有一个可选参数，是用来确定元素顺序的函数。如果这个参数被省略，那么数组中的元素将按照ASCII字符顺序进行排序。如：   var arr = ["a", "b", "A", "B"]; arr.sort(); console.log(arr);//["A", "B", "a", "
js对象排序
最新发布
loggers_kid的博客
02-05 693
可以使用 Object对象提供的两个方法，Object.entries(） 和 Object.fromEntries(）实现将对象变为数组和将数组变为对象。对象排序常见的两种场景分别是键排序，或是值排序。键排序比较简单，我们把思路简化一下，直接将键提取出来，遍历排序后的数组生成新的对象。输出结果为： { a: 'value1', c: 'value3', d: 'value2' } 排序成功。输出结果为： { a3: 4, a2: 18, a1: 32 } 排序成功。
【JavaScript】js对象进行排序（对象转数组,对象转对象）
热门推荐
06-13 1万+
js对象进行排序（对象转数组,对象转对象）
js如何对数组进行排序（包括数组对象）
欢迎光临
12-13 7405
1.字符串排序 sort() var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // 对 fruits 中的元素进行排序 注意：使用 sort() 对数值进行排序会产生错误，因为此方法是按字符串顺序进行排序的，如 “25” 大于 “100”，因为 “2” 大于 “1”。 2.反转数组，r...
javascript firefox兼容ie的dom方法脚本
10-30
js firefox下兼容ie的dom的实现方法小结。利用我们为了兼容多浏览器写出更好的效果代码
Dom加载让图片加载完再执行的脚本代码
01-19
现在，我们来研究一下如何解决这个问题，解决方法就是在DOM加载...John Resig在《Pro JavaScript Techniques》里，有这样一个方法处理DOM加载，原理就是通过document&& document.getElementsByTagName &&documen
js-dom-learning:有关DOM脚本学习的演示
05-21
这只是一个有关js DOM学习的演示，其中涉及DOM Core，Html DOM和Css DOM。 通常，我们使用js框架（例如Jquery，Angular，Backbone，React等）来完成工作。 但是在这个演示中，我使用本地js与后端进行交互。 压缩代码
JS对象排序
Monkey
07-19 565
在JavaScript中，对于对象排序，我们首先需要明确对象本身并不能被直接排序。对象中的键值对并没有特定的顺序，而且键总是按照它们被添加到对象时的顺序排列。然而，我们可以通过将对象转化为数组，然后对数组进行排序，最后再将数组转化回对象，以实现"排序"的效果。注意，上面的排序是基于键（key）的字典序，如果你需要基于值进行排序，可以修改排序函数中的比较函数。
js对象属性排序
11-07
js对象属性排序
JS 数组对象sort方法排序
qq_33235680的博客
03-01 2920
JS 数组对象sort方法排序
JavaScript的五种排序方法
知之为知之，不知为不知
04-19 1689
JavaScript的五种排序方法，冒泡排序、选择排序、插入排序、归并排序、快速排序
如何运用js给对象排序
丰柏林的博客
02-25 2812
#如何用JS来给对象排序，代码下方有方法的解释 //按对象的其中一个值来给对象排序 let zhang = { name : "zhang", age : 18, face :"handsome" } let wang = { name : "wang" , age : 21, face : "amazing" } let g...
【排序】js简单实现前端数组排序，多字段数组对象排序，字符串排序，数字排序等
seeeeeeeeeee的博客
10-27 714
数组对象根据某一个字段排序。
js数组对象排序
m0_54566205的博客
03-25 1710
方法会按照对象的字符串表示进行排序。如果需要按照对象的某个属性进行排序，则可以修改比较函数的实现方式。方法对数组进行排序。该方法可以接受一个可选的比较函数作为参数，以便按照特定的顺序进行排序。，表示需要比较的数组元素。如果需要按照数字大小进行排序，则可以将比较函数传递给。在 JavaScript 中，可以使用数组对象的。需要注意的是，如果数组元素是对象，那么默认情况下，，表示需要将数组元素按照从小到大的顺序排序。，表示需要按照分数从高到低进行排序。在这个例子中，比较函数返回。在这个例子中，比较函数返回。
【js】对象排序
weixin_37624436的博客
12-08 77
function compare(property) { return function (a, b) { let value1 = a[property]; let value2 = b[property]; return value2 - value1; } }
jsdom nodejs
09-28
它可以解析HTML文档并生成DOM树，然后你可以使用类似于浏览器中的JavaScript脚本来对DOM进行操作和查询。 使用jsdom，可以在服务器端执行一些客户端代码，比如网页爬虫、自动化测试等。它为Node.js提供了一个虚拟的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值