版权声明：本文为博主原创文章，转载时请标明出处 https://blog.csdn.net/weixin_41056807/article/details/84025807
第七章 动态创建标记
一.
1.document.write最大缺点是违背“行为应该与表现分离”的原则。还有，MIME类型application/xhtml+xml与document.write不兼容，浏览器在呈现这种XHTML文档时不会执行document.write方法。
2.document.write方法像<font标签去设定字体和颜色
3.innerHTML属性：用来读写给某给定的元素里的HTML内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML = "<p> I inserted <em>this</em> content.</p>";
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
但是用这个技术无法区分是插入的HTML还是替换，一旦使用innerHTML，他的全部内容会被替换。但是innerHTML实现js和HTML的分离。innerHTML也是HTML的专有属性。任何时候标准DOM都可以替代innerHTML
二.DOM方法
1.DOM是双向车道，可以获取文档的内容还可以更新文档的内容。在浏览器看来，DOM节点树才是文档。如果想添加一些标记到文档，就必须插入元素节点。
2.createElement方法——创建节点
方法本身不能影响页面的表现
<script>
window.onload = function () {
var pa = document.createElement("p");
var info = "nodeName: ";
info+=pa.nodeName;
info+=" nodeType: ";
info+=pa.nodeType;
alert(info);
}
</script>
此时的pa变量不是任何DOM树的组成部分——文档碎片。还不能显示在浏览器窗口画面。但是他和任何节点一样都有自己的DOM属性。
3.appendChild方法
想创建的p元素称为testdiv元素的子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var pa = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(pa);
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
4.createTextNode方法——创建文本
内容hello的文本节点成为p的一个子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
var pa = document.createElement("p");
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(pa);
var txt = document.createTextNode("Hello!!");
pa.appendChild(txt);
}
</script>
</head>
<body>
<div id="testdiv"></div>
</body>
</html>
上面还可以这么写
<script>
window.onload = function () {
var pa = document.createElement("p");
var txt = document.createTextNode("Hello!!");
pa.appendChild(txt);
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(pa);
}
</script>
三.重回图片库
展示动态创建HTML内容的使用案例
js中几个函数
-
addLoadEvent函数（通用型）：
把现有的window.onload事件处理函数的值存入变量oldonload。
若在这个函数上还没绑定任何函数，则把新函数添加给他
若在这个函数上已经绑定一些函数，则把新函数追加到现有指令的末尾 -
insertAfter函数（通用型）：
是辅助preparePlaceholder函数使用 -
preparePlaceholder函数：
负责创建一个img和一个p元素，这个函数把新创建的元素插入到节点树里图片库清单的后面。 -
prepareGallery函数
负责处理事件。这个函数将遍历图片库清单里的每个链接。 -
showPic
当用户点击链接中的某个时，会调用showPic
动态的实现 就是在HTML文档中不再标记p 和img 占位符了
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
font-family: Arial, Helvetica, sans-serif;
color: #333;
margin: 1em 10%;
background-color: #ccc;
}
h1{
color: #333;
background-color: transparent;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
img{
width: 450px;
display: block;
clear: both;
}
#imagegallery{
list-style: none;
}
#imagegallery li{
/*用css将列表项纵向变横向*/
display: inline;
}
#imagegallery li a img{
border: 0;
}
</style>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="../img/flower1.jpg" title="A Fireworks Display" >
<img src="../img/flower1.jpg" alt="Fireworks" style="width: 80px">
</a>
</li>
<li>
<a href="../img/flower2.jpg" title="A cup of coffee">
<img src="../img/flower2.jpg" alt="Coffee" style="width: 80px">
</a>
</li>
<li>
<a href="../img/flower4.jpeg" title="A red rose">
<img src="../img/flower4.jpeg" alt="Rose" style="width: 80px">
</a>
</li>
<li>
<a href="../img/flower5.jpg" title="The Famous clock">
<img src="../img/flower5.jpg" alt="Clock" style="width: 80px">
</a>
</li>
</ul>
<!--<img src="../img/timeqq.png" alt="my image gallery" id="placeholder">-->
<!--<p id="description">Choose an imag.</p>-->
<script>
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild==targetElement){
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder() {
if (!document.createElement) return false;
if (!document.createTextNode) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","../img/timeqq.png");
placeholder.setAttribute("alt","my image gallery");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder,gallery);//图片placeholder插到gallery后面
insertAfter(description,placeholder);//文字description插到placeholder后面
}
function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i=0;i<links.length;i++){
links[i].onclick = function () {
return showPic(this);
}
links[i].onkeypress=links[i].onclick;
}
}
function showPic(whichpic) {
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src", source);
if (!document.getElementById("description")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
//用一个变量存放description的文本p
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3) {//nodeType属性检查返回一个大写字母的值
//把链接title传给text变量
description.firstChild.nodeValue = text;
}
return false;
}
addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);
</script>
</body>
</html>
点击链接
四.Ajax
1.ajax主要优势：对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求，他会在后台处理请求，同时用户还能继续浏览页面并与页面交互
好处：增强站点的可用性，用户不用刷新页面就能得到响应（减少重复加载页面的次数）
2.XMLHTTPRequest对象
其中重要方法：open（）用来指定服务器上将要访问的文件，指定请求类型：GET,POST,SEND，这个方法的第三个参数用于指定请求是否以异步方式发送和处理
3.onreadystatechange是一个事件处理函数，会在服务器给XMLHTTPRequest对象送回响应时候被触发执行。
request.onreadystatechange = function（）{}
onreadystatechange不要在函数名后面加括号。因为加括号表示立即执行函数而我们在此只想把函数本身的引用
4.readyState属性的值有5个可能得值：
0——未初始化
1——正在加载
2——加载完毕
3——正在交互
4——完成
当readyState=4就可以访问服务器发送回来的数据
访问服务器发送回来的数据要通过2个属性完成。一个responseText属性：保存文本字符串形式的数据。一个responseXML属性保存Content-Type头部中指定为：text/xml的数据。
5.异步请求
就是脚本在发送XMLHTTPRequest请求之后，仍然继续执行，不会等待响应返回。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
function getHTTPObject() {
if (typeof XMLHttpRequest == "undefined")
XMLHttpRequest=function () {
try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
catch (e) {
}
try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
catch (e) {
}
try {return new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {
}
return false;
}
return new XMLHttpRequest();
}
function getNewContent() {
var request = getHTTPObject();
if (request){
request.open("GET","7.1innerHTML.html",true);
request.onreadystatechange = function () {
if (request.readyState==4){
var pa = document.createTextNode(request.responseText);
pa.appendChild(txt);
document.getElementById('new').appendChild(pa);
}
};
request.send(null);
} else {
alert("sorry,your browser doesn't support XMLHttpRequest");
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(getNewContent);
</script>
</body>
</html>
第九章CSS-DOM
一.三位一体的网页
1.网页的结构层：HTML这样的标记语言负责创建
表示层：由css负责完成
行为层：JavaScript负责内容响应事件
2.使用HTML搭建文档的结构，css设置文档的呈现效果，DOM脚本实现文档的行为。三者存在潜在的重叠区域。
二.style属性
1.parentNode，nextSibling，previousSibling，childNodes，firstChild，lastChild这样的属性得到文档中各节点之间关系信息
2.获取样式element.style.color
style对象的属性的值必须放在引号里，单引号或双引号都可以
para.style.color='black';
什么时候用DOM脚本设置样式
1.用DOM找出文档中所有h1，然后找到他后面的元素给他添加样式
没有DOM操作的显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>CSS-DOM</h1>
<p>this first paragraph leads you in.</p>
<p>now you get the nitty-gritty of the story</p>
<p>the most important informatin is delivered first</p>
<h1>Extra!Extra!</h1>
<p>Further developments are unfolding</p>
<p>You can read all about it here!</p>
<script>
function getNextElement(node) {
if (node.nodeType == 1){
return node;
}
if (node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
function styleHeaderSiblings() {
if (!document.getElementsByTagName) return false;
var headers = document.getElementsByTagName("h1");
var elem;
for (var i=0;i<headers.length;i++){
elem = getNextElement(headers[i].nextSibling);
elem.style.fontWeight = "bold";
elem.style.fontSize = "1.2em";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(styleHeaderSiblings)
</script>
</body>
</html>
2.根据某种条件设置某种样式
表格型数据，把表格型数据转换为HTML内容的理想标签就是table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family: Helvetica,Arial,sans-serif;
background-color: #fff;
color: #000;
}
table{
margin: auto;
border: 1px solid #699;
}
caption{
margin: auto;
padding: 0.2em;
font-size: 1.2em;
font-weight: bold;
}
th{
font-weight: normal;
font-style: italic;
text-align: left;
border: 1px solid #699;
background-color: #9cc;
color: #000;
}
th,td{
width: 10em;
padding: 0.5em;
}
</style>
</head>
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
</body>
</html>
-
JavaScript适合处理重复性任务。用while或for循环遍历一个很长列表。
可以编写一个函数来为表格添加斑马线效果，只要隔行设置样式 -
把文档的所有table元素找出来
-
对每个table元素，创建odd（奇）变量并把他初始化为false
-
遍历这个表格里所有数据行
-
若变量odd的值是true，设置样式并把odd变量修改为false
-
若odd值为false，不设置样式，但是odd修改为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family: Helvetica,Arial,sans-serif;
background-color: #fff;
color: #000;
}
table{
margin: auto;
border: 1px solid #699;
}
caption{
margin: auto;
padding: 0.2em;
font-size: 1.2em;
font-weight: bold;
}
th{
font-weight: normal;
font-style: italic;
text-align: left;
border: 1px solid #699;
background-color: #9cc;
color: #000;
}
th,td{
width: 10em;
padding: 0.5em;
}
</style>
</head>
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
<script>
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd,rows;
for (var i=0;i<tables.length;i++){
odd = false;
rows = tables[i].getElementsByTagName("tr");
for (var j=0;j<rows.length;j++){
if (odd == true){
rows[j].style.backgroundColor = "#eee";
odd=false;
} else{
odd=true;
}
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(stripeTables);
</script>
</body>
</html>
增加鼠标悬停效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font-family: Helvetica,Arial,sans-serif;
background-color: #fff;
color: #000;
}
table{
margin: auto;
border: 1px solid #699;
}
caption{
margin: auto;
padding: 0.2em;
font-size: 1.2em;
font-weight: bold;
}
th{
font-weight: normal;
font-style: italic;
text-align: left;
border: 1px solid #699;
background-color: #9cc;
color: #000;
}
th,td{
width: 10em;
padding: 0.5em;
}
</style>
</head>
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
<script>
// 斑马线效果
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd,rows;
for (var i=0;i<tables.length;i++){
odd = false;
rows = tables[i].getElementsByTagName("tr");
for (var j=0;j<rows.length;j++){
if (odd == true){
rows[j].style.backgroundColor = "#eee";
odd=false;
} else{
odd=true;
}
}
}
}
//鼠标悬停效果
function highlightRows() {
if (!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function () {
this.style.fontWeight = "bold";
}
rows[i].onmouseout = function () {
this.style.fontWeight = "normal";
}
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload !='function'){
window.onload = func;
} else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(stripeTables);
addLoadEvent(highlightRows);
</script>
</body>
</html>
