js练习7 --- 操作样式表节点树遍历范围的选择和操作
Posted 劳埃德·福杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习7 --- 操作样式表节点树遍历范围的选择和操作相关的知识，希望对你有一定的参考价值。
1、第一题
已知某网页包含3个样式表，其中两个为外部样式文件，一个为嵌入式样式信息，3个样式信息分别作用在3个文字段落上。
1.修改第一个样式表信息；
2.删除第三个样式表；
3.把第二样式表的背景颜色修改为红色；
4.给第3个段落的文字加上一个蓝色边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/stylesheet1.css">
<link rel="stylesheet" type="text/css" href="./css/stylesheet2.css">
<style type="text/css">
.p3
background-color: yellow;
</style>
</head>
<body>
<div id="poem">
<p class="p1">一方沃土</p>
<p class="p2">养育一代青年</p>
<p class="p3">爱，从不是单箭头</p>
</div>
<button onclick="changeFirst()">修改第一个样式表</button>
<button onclick="deleteThird()">删除第三个样式表</button>
<button onclick="changeSecond()">将第二个样式表中的背景颜色修改为红色</button>
<button onclick="changeThird()">给第3个段落的文字加上一个蓝色边框</button>
<script type="text/javascript">
// 修改第一个样式表
function changeFirst()
let sheet = document.styleSheets[0];
let rules = sheet.cssRules || sheet.rules;
let rule = rules[0];
rule.style.backgroundColor = "pink";
// 删除第三个样式表
function deleteThird()
let sheet = document.styleSheets[2];
let rules = sheet.cssRules || sheet.rules;
// 删除样式表中的所有样式
for(let i = 0; i < rules.length; i++)
if (sheet.deleteRule)
sheet.deleteRule(i); // 其它浏览器
else if (sheet.removeRule)
sheet.removeRule(i); // IE浏览器
// 将第二个样式表中的背景颜色修改为红色
function changeSecond()
let sheet = document.styleSheets[1];
let rules = sheet.cssRules || sheet.rules;
let rule = rules[0];
rule.style.backgroundColor = "red";
// 给第3个段落的文字加上一个蓝色边框
function changeThird()
let sheet = document.styleSheets[2];
let selectorText = ".p3";
let cssText = "border:2px solid blue";
if (sheet.insertRule)
sheet.insertRule(selectorText + "" + cssText + "", 0); //其它浏览器
else if (sheet.addRule)
sheet.addRule(selectorText, cssText, 0); //IE浏览器
</script>
</body>
</html>2.第二题
某网页包含有一个4个列表项的有序列表，假设我们只想访问到列表项。要求分别采用NodeIteration和TreeWalker类型方式，其中TreeWalker不允许使用过滤器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<p>列表</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</div>
<textarea rows="10" cols="40" id="text1"></textarea><br />
<input type="button" value="使用NodeIteration" onclick="makeList()" /><br />
<textarea rows="10" cols="40" id="text2"></textarea><br />
<input type="button" value="使用TreeWalker" onclick="makeList2()" />
<script>
// 使用NodeIteration
function makeList()
let div = document.getElementById("box");
// 过滤器
let filter = function(node)
return (node.tagName.toLowerCase() == "li") ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
;
let iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);
let output = document.getElementById("text1");
let node = iterator.nextNode();
while (node !== null)
output.value += node.tagName + "\\n";
node = iterator.nextNode();
// 使用TreeWalker
function makeList2()
let div = document.getElementById("box");
let walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
let output = document.getElementById("text2");
walker.firstChild(); //走到<p>
walker.nextSibling(); //走到<ul>
let node = walker.firstChild(); //走到第一个<li>
// 访问剩余的<li>
while (node !== null)
output.value += node.tagName + "\\n";
node = walker.nextSibling();
</script>
</body>
</html>3.第三题
某网页中包含一句“We are from NanJing forestry university.”,(其中NanJing是加粗显示)其实现下面操作：
1.选择”Jing fore”内容，并将其背景颜色改为红色；
2移除”from Nan”内容，并将其插入到”forestry universtiy”两个单词之间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="text">We are from <b>NanJing</b> forestry university.</p>
<button onclick="changeBg()">按钮1</button>
<button onclick="deleteAndInsert()">按钮2</button>
<script>
//选择"Jing fore"内容，并将其背景颜色改为红色
function changeBg()
let range1 = document.createRange(), range2 = document.createRange();
let text = document.getElementById("text");
let Node1 = text.childNodes[1].firstChild;
let Node2 = text.lastChild;
range1.setStart(Node1, 3);
range1.setEnd(Node1, 7);
let span = document.createElement("span");
span.style.backgroundColor = "red";
range1.surroundContents(span);
range2.setStart(Node2, 1);
range2.setEnd(Node2, 5);
let span2 = document.createElement("span");
span2.style.backgroundColor = "red";
range2.surroundContents(span2);
//移除"from Nan"内容，并将其插入到"forestry universtiy"两个单词之间
function deleteAndInsert()
let range = document.createRange();
let text = document.getElementById("text");
let startNode = text.firstChild;
let endNode = text.childNodes[1].firstChild;
range.setStart(startNode, 7);
range.setEnd(endNode, 3);
let fragment = range.extractContents();
let range2 = document.createRange();
let Node2 = text.lastChild;
range2.setStart(Node2, 10);
range2.setEnd(Node2, 10);
range2.insertNode(fragment);
</script>
</body>
</html>以上是关于js练习7 --- 操作样式表节点树遍历范围的选择和操作的主要内容，如果未能解决你的问题，请参考以下文章
js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格