innerHTML,outerHTML,innerText,outerText
innerHTML,outerHTML innerHTML检索或设置标签内的内容;
outerHTML检索或设置整个标签的内容(包含标签)。
<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
<input type="button" onclick="alert(document.all.fieldset.innerText);" value="innerText">
<input type="button" onclick="alert(document.all.fieldset.outerText);" value="outerText">
</fieldset>
两个alert输出的结果分别是:
innerHTML:
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
outerHTML:
<fieldset id="fieldset" style="width:600;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
<input type="button" onclick="alert(document.all.fieldset.outerHTML);" value="outerHTML">
</fieldset>
innerText,outText输出标签内部的文本信息
上面两个Text按扭输出同样的内容:
Original Text
但是注意的是,赋值时,outerText会连带标签一起替换成目标文本,innerText只替换原来的文本。
<fieldset id="fieldset" style="width:200;height:40">
<SPAN ID="oSpan">Original Text</SPAN>
</fieldset>
<input type="button" onclick="oSpan.innerText='changed'" value="inner change">
<input type="button" onclick="oSpan.outerText='changed'" value="outer change">
<input type="button" onclick="alert(document.all.fieldset.innerHTML);" value="innerHTML">
点inner change后,点innerHTML输出结果为:
<SPAN ID="oSpan">changed</SPAN>
点outer change后,点innerHTML输出结果为:
changed
自己用代码来体会一下
HTML 代码片段如下:
<div id=test><table><tr><td>文本<a>链接</a>另一段文本</td></tr></table></div>
<input type=button onclick=alert(test.innerText) value="show innerText"><br>
<input type=button onclick=alert(test.innerHTML) value="show innerHTML"><br>
<input type=button onclick=alert(test.outerHTML) value="show outerHTML"><br>
<div id="div"><input name="button" value="Button" type="button"><font color="green"><h2>This is a DIV!</h2></font></div>
<input name="innerHTML" value="innerHTML" type="button" OnClick="alert(div.innerHTML);">
<input name="outerHTML" value="outerHTML" type="button" OnClick="alert(div.outerHTML);">
<input name="innerText" value="innerText" type="button" OnClick="alert(div.innerText);">
<input name="outerText" value="outerText" type="button" OnClick="alert(div.outerText);">
如果有自己的主机,就可以定义404错误页面。
现在有些虚拟主要,也支持自定义404错误页面。
比如乐猫,Discuz主机等。都可以的,
可以跟空间提供商联系!
1.创建链接
<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http:///","网页教学网");
</script>
2.创建DIV
<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
var div = document.createElement("div");
div.innerHTML = text;
o.appendChild(div);
}
createDIV("网页教学网:http:///");
Webjx.Com
</script>
3.创建表单项
<script language="javascript">
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
var input = document.createElement("input");
input.type = sType;
input.value = sValue;
o.appendChild(input);
}
createInput("button","ooo");
</script>
4.创建表格
注意:一定要有tbody,否则IE下不能创建表格,FF下可以!
<script language="javascript">
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.width = w;
table.height = h;
table.border = 1; 网页教学网
for(var i=1;i<=r;i++)
{
var tr = document.createElement("tr");
for(var j=1;j<=c;j++)
{
var td = document.createElement("td");
td.innerHTML = i + "" + j;
//td.appendChild(document.createTextNode(i + "" + j));
td.style.color = "#FF0000";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
o.appendChild(table);
}
createTable(270,270,9,9);
</script>
这里对web程序方面的优化作一个总结,虽然我用的是PHP其实不管理是什么语言方向都是一样的。
1.编码规范化可读性优化
编码规范我想一般程序员不会不了解,如果你这方面是空白你应该好好补补基础了,做到编码规范是一个好的程序员的最基础要求,一个团队也应该有自己的编码规范。所以程序的优化也应该包含到这个方面,在你开发程序的过程中可能会有些遗漏,所以在我们进行编码规范化可读性优化是很有必要的。其实一份再好的程序代码若干年后你自己都未必能看的懂更不用说别人来看你的代码,使你自己写出的代码有更好的可读性,这个是一个好的程序员应该做的,并且是对一个团队和你自己作品的责任感。
优化方向就是使你的代码更清析更易懂。
2.程序效率、流程逻辑优化
程序效率的优化是最重要的,程序运行速度是程序代码好坏最重要的因素,程序逻辑其实就是你的解决思路,解决思路并不是唯一的,所以我们可以对它进行优化。逻辑的设计也和可读性有一定的关系,逻辑清晰可读性就更强。
优化的方向就很明确了提高速度,清晰逻辑。简单的逻辑并不代表一定是速度快,复杂的逻辑并不一定是慢的。所以在这两方面是关联。
3.SQL优化,减少查询次数
在使用数据库的程序中我们知道数据库的查询是在整个程序执行中占很大比例的,所以SQL的优化是非常重要的。
优化的方向一方面是SQL语句本身的优化,熟悉SQL的人应该会知道,不同的SQL写法执行的效率差别是很大的,如:尽量不对字段加函数操作,更多的大家可以去查找高效SQL这方面的资料。第二在一个页面中减少查询次数,这个道理很清楚,我们可以把整个页面的SQL都输出来进行分析,是否可以合并语句,是否可以做冗余字段等等,尽量减少SQL的查询次数,坚绝不在循环中使用查询。
4.缓存优化
缓存优化其实就是对上一点的补充,但缓存优化是很重要的,所以可以单独列为一点。缓存的数据主要就是从数据库中读取出来的。对缓存的一些介绍:http://www.coderhome.net/zifa/?p=195,当然缓存也应该适当,应该只把需要缓存的数据进行缓存。
5.html,css,js文件优化,减少冗余代码
这一点与服务端程序没有关系,主要是与浏览器相关的几方面。html的结构是会影响到浏览器的解析,所以好的html代码也会影响访问速度。相比之下客户端的代码就不允许有一点无用的东西存在,能把文件减少一K就应该减少。js虽然是在客户端执行但也应该去考虑它的效率问题,网络上也有这方面的文章介绍。
6.可用性优化
可用性优化主要指的是UED方面的,并不是每一个团队都有专门的UED,作为web程序的开发人员也应该有这方面的意识,去了解用户,而不是埋头写代码。努力使你开发的页面对用户更友好,更容易使用。
7.框架架构优化
如果有使用到开发框架,也应该考虑到对框架的优化,减少框架本身占用的资源。
其它:服务器架构优化、数据库优化
这些方面和程序开发没有直接关系,但和web程序的运行也是关系密切的,所以顺便提一提。
<html>
<head>
<style type="text/css">
html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar{
position:absolute;
top:3px;
left:50px;
width:300px;
height:20px;
background:#ccc;
z-index:2;
overflow:hidden;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="Main">
<p>&nbsddddddddddddddddddddddddddddddddddddddddddddddddddp;</p>
<p>&nbsxxxxxxxxcccccccccccccccccccxp;</p>
<p> </p>
<p>&nbcxvcxvcxvscfgdfgxvxvcxzvcsp;</p>
<p>&ncxvcxzvczxvcxzvczbsp;</p>
<p> </p>
<p> dfdf</p>
<p>&nbscxzvcxzvcxzvczxvcxzp;</p>
<p> </p>
<p> </p>
<p>&nbsxzvcccccccccccccccccccccccccccccccccccccccccccccccccccp;</p>
<p> </p>
<p> </p>
<p>&nbsxcvcvvvvddddfffffffffffffffffffffffffffffffffp;</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> ddddddddddddddddd</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>&nbsxp;</p>
<p> </p>
<p> </p>
<p>&nbxsp;</p>
<p> </p>
<p> </p>v
</div>
</body>
</html>
代码二.
<!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>
<style type="text/css">
html,body{
width:100%;
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
#Main{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
z-index:1;
}
#ToolBar{
position:absolute;
top:3px;
left:50px;
width:300px;
height:20px;
background:#ccc;
z-index:7;
overflow:hidden;
}
#ToolBa_2{
position:absolute;
top:300px;
left:50px;
width:300px;
height:20px;
background:#ff0000;
z-index3;
overflow:hidden;
color:#fff;
}
#ToolBa_3{
position:absolute;
top:600px;
left:50px;
width:300px;
height:20px;
background:#ff0000;
z-index32;
overflow:hidden;
color:#fff;
}
#ToolBa_4{
width:300px;
height:200px;
background:#ff0000;
z-index35;
overflow:hidden;
color:#fff;
}
#ToolBa_5{
width:300px;
height:200px;
background:#ff0000;
z-index39;
overflow:hidden;
color:#fff;
}
</style>
</head>
<body scroll="no"><!-- scrol="no" IE中必须 -->
<div id="ToolBar">固定在上方不动</div>
<div id="ToolBa_2">可是这样页面上所有div的位置都固定不动了!</div>
<div id="ToolBa_3">可是这样页面上所有div的位置都固定不动了!</div>
<div id="ToolBa_4">可是这样页面上所有div的位置都固定不动了!</div>
<div id="ToolBa_5">可是这样页面上所有div的位置都固定不动了!</div>
<div id="Main">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
相关文章
- PHP去除html、css样式、js格式的方法很多,但发现,它们基本都有一个弊端:空格往往清除不了 经过不断的研究,最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
java 画pdf用itext调整表格宽度、自定义各个列宽的方法
这篇文章主要介绍了java 画pdf用itext调整表格宽度、自定义各个列宽的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31IE6-IE9中tbody的innerHTML不能赋值的解决方法
IE6-IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </head> <body style="height:3...2014-06-07- 通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识,对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
- 在网站开发中,我们经常使用php similar text 计算两个字符串相似度;1,similar_text的用法 如果我想计算"ly89cn"和"ly89"的相似程度,有两种表示方法复制代码 代码如下: echo similar_text('ly89cn', 'ly89'); ...2015-11-08
- 这篇文章主要介绍了java 用itext设置pdf纸张大小操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31
- 在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会,下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别,需要的朋友参考下...2016-02-21
- 这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起来学习学习吧。...2017-06-24
- 这篇文章主要介绍了angularjs中ng-bind-html的用法总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-05-27
- 这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06
- 最近在开发一个项目,其中有需求要求我们把一段html转换为一般文本返回,使用正则表达式是明智的选择,下面小编给介绍下C#使用正则表达式过滤html标签,需要的朋友参考下...2020-06-25
C# 使用 WebBrowser 实现 HTML 转图片功能的示例代码
这篇文章主要介绍了C# 如何使用 WebBrowser 实现 HTML 转图片功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-11-03- 在做ajax无刷新时,我想很多朋友都会知道js innerHTML来更改 div 或table里面的值哦. JavaScript的innerHTML 永远不知道你可以改变的内容,一个HTML元素?也许你要...2016-09-20
IE6-IE9使用JSON、table.innerHTML所引发的问题
这篇文章主要介绍了IE6-IE9使用JSON、table.innerHTML所引发的问题 ,需要的朋友可以参考下...2015-12-24- stream_context_create创建并返回一个文本数据流并应用各种选项,可用于fopen(),file_get_contents()等过程的超时设置、代理服务器、请求方式、头信息设置的特殊过程。...2016-11-25
JS实现pasteHTML兼容ie,firefox,chrome的方法
这篇文章主要介绍了JS实现pasteHTML兼容ie,firefox,chrome的方法,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2016-06-24- MIME表示多用途Internet邮件扩允协议。多用途互联网邮件扩展类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使...2016-09-20
Razor TagHelper实现Markdown转HTML的方法
下面小编就为大家分享一篇Razor TagHelper实现Markdown转HTML的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22IE下select标签innerHTML插入option的BUG
调用方法 addOption(sltObj, '<option>a</option>'); 代码如下 var sltObj=document.getElementById('xx');//获取select对象,这里只是给个例子,可以按自己习惯来获...2016-09-20- 这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码,给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06