第一题

1. 在⽹页中，添加三个DIV段落；

2. 为第⼀个DIV段落，连续添加两个⽂本节点，再将两个⽂本合并；

3. 为第三个DIV段落，添加包含4个列表项的列表，请使用DocumentFragment类型。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><div id="box"></div><script>let box = document.getElementById("box"); // 添加三个divlet div1 = document.createElement("div");let div2 = document.createElement("div");let div3 = document.createElement("div");box.appendChild(div1);box.appendChild(div2);box.appendChild(div3);// 添加两个文本节点let textNode1 = document.createTextNode("hello");let textNode2 = document.createTextNode(" world");div1.appendChild(textNode1);div1.appendChild(textNode2);div1.normalize(); // 文本合并// 添加包含4个列表项的列表let fragment = document.createDocumentFragment(); // 创建文档片段let list = document.createElement("ul");for(let i = 0; i < 4; i++) {let li_node = document.createElement("li");li_node.appendChild(document.createTextNode("Item " + (i+1)));fragment.appendChild(li_node);}list.appendChild(fragment);div3.appendChild(list);</script>
</body>
</html>

第二题

1. 使用HTML DOM提供的的属性和⽅法，动态的创建⼀个6⾏4列的表格，每列信息分别是⼀位同学的姓名，学号，成绩和绩点。

2. 针对上述表格数据，计算出六个同学的平均成绩和平均绩点，请使用动态脚本的操作⽅式。

3. 针对上述表格数据，把低于平均绩点的同学，用黄⾊标记出来，请使用动态脚本的操作⽅式。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><script>// 创建tablelet table = document.createElement("table");table.border = 1;table.width = "100%";// 创建tbodylet tbody = document.createElement("tbody");table.appendChild(tbody);// 创建一个增加一行列表的函数function addOneRow(row_index, col_num, col) {tbody.insertRow(row_index);for(let i = 0; i < col_num; i++) {tbody.rows[row_index].insertCell(i);tbody.rows[row_index].cells[i].appendChild(document.createTextNode(col[i]));}}addOneRow(0, 4,["姓名", "学号", "成绩", "绩点"]);addOneRow(1, 4, ["张三", "190350201", "95", "4.5"]);addOneRow(2, 4, ["李四", "190350202", "89", "3.5"]);addOneRow(3, 4, ["王五", "190350203", "63", "1"]);addOneRow(4, 4, ["赵六", "190350204", "70", "2"]);addOneRow(5, 4, ["钱七", "190350205", "82", "3"]);addOneRow(6, 4, ["孙八", "190350206", "90", "4"]);document.body.appendChild(table);// 计算平均成绩和平均绩点let row = 6, col = 4;let sum_grade = 0, sum_gpa = 0;for(let i = 1; i <= row; i++) {sum_grade += parseInt(table.childNodes[0].rows[i].cells[2].childNodes[0].nodeValue);sum_gpa += parseFloat(table.childNodes[0].rows[i].cells[3].childNodes[0].nodeValue);}console.log("平均成绩：" + sum_grade / row);console.log("平均绩点：" + sum_gpa / row);// 把低于平均绩点的同学,用黄⾊标记出来let style = document.createElement("style");style.type = "text/css";style.appendChild(document.createTextNode(".highlight { background-color: yellow; }"));let head = document.getElementsByTagName("head")[0];head.appendChild(style);let avg_gpa = sum_gpa / row; // 平均绩点for(let i = 1; i <= row; i++) {let targetNode = table.childNodes[0].rows[i].cells[3];let gpa = parseFloat(targetNode.childNodes[0].nodeValue);if(gpa < avg_gpa) {targetNode.className = "highlight";}}</script>
</body>
</html>

js练习6 --- DOM文本节点的操作、动态脚本、动态样式、操作表格相关推荐

html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
（JS基础）DOM：节点类型
Node 类型所有节点类型都继承于 Node 类型,因此所有节点类型都共享这相同的基本属性和方法. 基本属性和方法 nodeName :节点名.对于元素类型,则是元素的标签名(均为大写),如&quo ...
js jq 如何获取文本节点
获取元素文本节点的方法网上有好几种,我对比了用其中最简单的一种 1.jquery获取 <div id="demo">只获取我<a href="" ...
DOM对象,节点,获取元素的非行间样式,元素的偏移量等属性词
获取页面中的元素的方法作用: 通过各种方式获取页面中的元素以前我们说过, id 可以直接使用这个方法只能通过 id 获取今天学的就是使用各种方式比如: id, 类名, 标签名, 选择器的方 ...
DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
html dom 替换节点,替换从javascript dom文本节点
我使用javascript处理xhtml.我得到一个div节点的文本内容,通过连接所有子节点的nodeValue,其中nodeType == Node.TEXT_NODE. 生成的字符串有时包含一个不 ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态添加脚本按需加载首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
jQuery（三）：样式操作
一.DOM操作分类 DOM Core:任何一种支持DOM的编程语言都可以使用它,例如:getElementById(). HTML-DOM:用于处理HTML文档,例如:document.forms. ...

js练习6 --- DOM文本节点的操作、动态脚本、动态样式、操作表格

目录

第一题

第二题

js练习6 --- DOM文本节点的操作、动态脚本、动态样式、操作表格相关推荐

最新文章

热门文章