- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

JavaScript动态创建DOM（七）

AI浩发表于 2022/03/02 09:29:43 2022/03/02

【摘要】动态创建DOMdocument.write只能在页面加载过程中才能动态创建。可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。<html xmlns="http://www.w3.org/1999/xht...

动态创建DOM

document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。

<head>

window.onload = function() {

var div = document.getElementById("d1");

//返回dom对象在内存中创建

var btn = document.createElement("input");

btn.type = "button";

btn.id = "btn1";

btn.value = "我是动态创建的";

btn.onclick = function() {

alert("i'm a super button");

var txt = document.getElementById("t");

div.removeChild(txt);

}

div.appendChild(btn);

}

</script>

</head>

<body>

<div>

as<b></b>dfasdf</div>

aasdf<input id="t" type="text" />

</div>

</body>

</html>

注：通过js动态创建的元素，直接 右键→查看源码是看不到的，需要通过“开发人员工具”才能看到。动态创建的控件，如果没有添加到文档中，则不能使用get...byid获取

innerText innerHTML value

value 获取表单元素的值
几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。//FF不支持innerText,在FF下用textContent属性。也可以用innerHTML设置普通文本。
示例： innerText与innerHTML区别。

<head>

<title>北京欢迎你</title>

function showInfo() {

var aObj = document.getElementById('a1');

alert(aObj.innerHTML);

alert(aObj.innerText);

}

</script>

</head>

<body>

<a id="a1" href="#"><font color="red">传</font>智<font color="green">播</font>客.net培训</a>

<br />

</body>

</html>

用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建。示例：

function createlink() {

var divMain = document.getElementById("divMain");

divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";

}

案例：点击按钮动态增加网站列表，分两列，第一列为网站的名字，第二列为带网站超链接的网站名。增加三行常见网站。浏览器兼容性问题，见备注。动态产生的元素，查看源代码是看不到的。通过DebugBar→Dom→文档→HTML可以看到。

<head>

window.onload = function() {

var json = [{ "name": "cnblogs", "site": "http://www.cnblogs.com" },

{ "name": "cnbeta", "site": "http://www.cnbeta.com" },

{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }

];

var div = document.getElementById("d1");

var table = document.createElement("table");

table.border = "1";

table.width = "400px";

div.appendChild(table);

for (var i = 0; i < json.length; i++) {

var site = json[i];

var row = document.createElement("tr"); //创建行

table.appendChild(row); //添加到table中

var td = document.createElement("td"); //创建td

td.innerHTML = "<a href='" + site.site + "'>" + site.name + "</a>";

row.appendChild(td);

td = document.createElement("td");

td.innerText = site.site;

row.appendChild(td);

}

</script>

</head>

<body>

</body>

</html>

练习：动态生成n个文本框

<head>

<title>北京欢迎你</title>

function f1() {

var num = document.getElementById("txt").value;

var div = document.getElementById("d1");

div.innerHTML = "";

for (var i = 1; i <= parseInt(num); i++) {

var t = document.createElement("input");

t.type = "text";

t.value = i;

t.id = "t" + i;

div.appendChild(t);

if (i % 3 == 0) {

var bt = document.createElement("br");

div.appendChild(bt);

}

</script>

</head>

<body>

<div id="d1">fdhiusahfdoiuhwiohfoi</div>

</body>

</html>

练习：无刷新评论。

<head>

<title>北京欢迎你</title>

function f1() {

var name = document.getElementById("txtName").value;

var content = document.getElementById("txtContent").value;

var row = document.createElement("tr");

document.getElementById("tb").appendChild(row);

var td = document.createElement("td");

td.innerText = name;

row.appendChild(td);

td = document.createElement("td");

td.innerText = content;

row.appendChild(td);

}

</script>

</head>

<body>

</table>

昵称：<input id="txtName" type="text"/><br />

</body>

</html>

浏览器兼容性问题

和IE8不一样，用insertRow、insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。FF不支持innerText。
所以动态加载网站列表的程序修改为：

var tr = tableLinks.insertRow(-1);//FF必须加-1这个参数,表追加。如果不是负数，则表示在某个索引之前插入。

var td1 = tr.insertCell(-1);

td1.innerText = key;

var td2 = tr.insertCell(-1);

td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";

或者：（不建议）

<table id="tableLinks"><tbody></tbody></table>，然后tableLinks. tBodies[0].appendChild(tr);

例：动态创建表格

<html>

<head>

window.onload = function () {

var json = [{ "name": "cnblogs", "site": "http://www.cnblogs.com" },

{ "name": "cnbeta", "site": "http://www.cnbeta.com" },

{ "name": "qiushibaike", "site": "http://www.qiushibaike.com" }];

var tb = document.createElement("table");

document.getElementById("d1").appendChild(tb);

tb.border = "1";

for (var i = 0; i < json.length; i++) {

var site = json[i];

var row = tb.insertRow(-1);

var td = row.insertCell(-1);

td.innerHTML = site.name;

td = row.insertCell(-1);

td.innerHTML = site.site;

}

</script>

</head>

<body >

</body>

</html>

innerHTML还是操作Dom节点

操作页面的元素的时候是用innerHTML的方式还是createElement()、appendChild()与removeChild()的方式？
- 1.对于大量进行节点操作时，使用innerHTML的方式性能要好于频繁的Dom操作。
- 先将页面的HTML代码写好，然后调用一次innerHTML,而不要反复调用innerHTML.
- 2.对于使用innerHTML=‘’的方式来删除节点，在某些情况下会存在内存问题。比如：div下面有很多其他元素，每个元素都绑定有事件处理程序。此时，innerHTML只是把当前元素从节点树上移除了，但是那些事件处理程序依然占用内存。

代码是否需要放置到onload中

如果js代码需要操作页面上的元素，则将该代码放到onload里面。因为当页面加载完毕之后页面上才会有相关的元素
如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中，
//例如：声明变量，相加求和等操作。
<body>
<script type="text/javascript">
//写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕，所以可以不放到onload里面也可以操作页面上的元素。
//建议将操作页面元素的代码都放到onload里面。
</script>
</body>

Js操作页面样式，其他

易错：修改元素的样式不是设置class属性，而是className属性。。(class是JavaScript的一个保留字，属性不能用关键字、保留字所以就变成className了)案例：网页开关灯的效果。
修改元素的样式不能this.style="background-color:Red"。
易错：单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style. backgroundColor；元素样式名是class，在JavaScript中是className属性；font-size→style.fontSize；margin-top→style.marginTop //驼峰命名法。
单独修改控件的样式<input type=“button” value=“AAA” onclick=“this.style.color=‘red’” />。技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。
操作float样式的时候，IE与其他浏览器不太一样。IE：obj.style.styleFloat=‘right’;其他浏览器：obj.style.cssFloat=‘right’;//通用代码见备注1.

========================备注1==========================

var vv = document.getElementById('dv1');

if (typeof (vv.style.styleFloat) == 'string') {

vv.style.styleFloat = 'right';

} else {

vv.style.cssFloat = 'right';

}

案例1：创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。

<html>

<head>

window.onload = function () {

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++)

{

if (inputs[i].type == "text")

{

inputs[i].onblur = function () {

if (this.value.length == 0) {

this.style.backgroundColor = "red";

}

else {this.style.backgroundColor = "white";}

}

inputs[i].onfocus = function ()

{

this.style.backgroundColor = "white";

}

</script>

</head>

<body >

</body>

</html>

案例2：个td的时候，将这个td及之前的td背景变为红色，之后评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。。

<head>

<title>评分控件好看版</title>

function getCurrentIndex(curTd) {

var tdArr = document.getElementById('tblVote').getElementsByTagName('td');

for (var i = 0; i < tdArr.length; i++) {

if (curTd == tdArr[i]) {

return i;

}

return -1;

}

function initialEvent() {

var tdArr = document.getElementById('tblVote').getElementsByTagName('td');

for (var i = 0; i < tdArr.length; i++) {

//为每个td设置分数

tdArr[i].setAttribute("curScore", 10 * (i + 1));

//绑定onmouseover事件

tdArr[i].onmouseover = function () {

//设置鼠标指针为:手形

this.style.cursor = 'hand';

var tdArr = document.getElementById('tblVote').getElementsByTagName('td');

var curIndex = getCurrentIndex(this); //这里只能传this参数，不能传tdArr[i]

//将curIndex之前的五角星设置为：★

for (var j = 0; j <= curIndex; j++) {

tdArr[j].innerHTML = '★';

}

//将curIndex之后的五角星设置为：☆

for (var j = curIndex + 1; j < tdArr.length; j++) {

tdArr[j].innerHTML = '☆';

}

tdArr[i].onclick = function () { //绑定onclick事件

alert('您当前的评分为：'+this.getAttribute('curScore'));

}

</script>

</head>

<table id="tblVote" border="0" cellpadding="0" cellspacing="0" style="font-size: 40px;

color: Blue">

<tr>

</tr>

</table>

</body>

</html>

练习1：超链接的单选效果。页还原为白色。参考：点击变“呜呜”。页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其他超链接背景没有变。window.event.returnValue=false;。难点“this”

<head>

window.onload = function() {

var div = document.getElementById("mv");

var links = div.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {

links[i].onclick = function() {

for (var i = 0; i < links.length; i++) {

links[i].style.backgroundColor = "white";

}

this.style.backgroundColor = "red";

return false;

}

</script>

</head>

<body >

</div>

</body>

</html>

练习2：点击按钮，表格隔行变色：偶数行为黄色背景，奇数行为默认颜色。通过table的getElementsByTagName取得所有的tr，依次遍历，如果是偶数就…………。

<head>

window.onload = function() {

var tb = document.getElementById("tb");

var rows = tb.getElementsByTagName("tr");

for (var i = 0; i < rows.length; i++) {

if (i % 2 == 0) {

rows[i].style.backgroundColor = "red";

}

else {

rows[i].style.backgroundColor = "white";

}

var bgColor;

rows[i].onmouseover = function() {

bgColor = this.style.backgroundColor;

this.style.backgroundColor = "yellow";

}

rows[i].onmouseout = function() {

this.style.backgroundColor = bgColor;

}

</script>

</head>

<body>

<tr>

<td>joijioijoijoijoij</td>

</tr>

<tr>

<td>huihoiuhihiuh</td>

</tr>

<tr>

<td>joijioijoijoijoij</td>

</tr>

<tr>

<td>huihoiuhihiuh</td>

</tr>

<tr>

<td>joijioijoijoijoij</td>

</tr>

<tr>

<td>huihoiuhihiuh</td>

</tr>

</table>

</body>

</html>

练习3：放若干文本框，获得焦点的文本框黄色背景，其他控件背景颜色是白色
- 思路1：监听所有input的onfocus事件→将背景设置为黄色，监听所有input的onblur事件→将背景设置为白色。思路2：只监听onfocus和练习1一样。
练习4：点击表格行，被点击的行高亮显示（背景是黄色），其他行白色背景。监听每个tr的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。//对于table、div、span这类型元素没有onfocus（获取焦点的事件（无法触发这些事件。））

练习5：图片浏览器。动态创建控件

<head>

window.onload = function () {

var json = [{ "name": "美女1", "url": "images/1.jpg" },

{ "name": "美女2", "url": "images/2.jpg" },

{ "name": "美女3", "url": "images/3.jpg" },

{ "name": "美女4", "url": "images/4.jpg" }

];

var div = document.getElementById("imgs");

if (json.length > 0) {

var ul = document.createElement("ul");

div.appendChild(ul);

for (var i = 0; i < json.length; i++) {

var li = document.createElement("li"); //生成li

ul.appendChild(li);

var link = document.createElement("a");//动态创建a

link.href = json[i].url;

link.innerHTML = json[i].name;

link.onclick = function () {

var href = this.href; //获取href

img.src = href; //获取img标签设置src属性

return false; //取消后续内容的执行

}

li.appendChild(link);

}

var img = document.createElement("img");//动态生成img

div.appendChild(img);

}

</script>

</head>

<body>

</body>

</html>

设置div透明度

<html>

<head>

function setOpacity(ID,VALUE){

E=document.getElementById(ID);

if ("\v"=="v") E.filters.alpha.opacity=1*VALUE;

else E.style.opacity=0.01*VALUE;

}

</script>

body{background:url(http://www.newxing.com/img/450/1.jpg) no-repeat;}

#div1{

background-color:red;

color:#fff;

height:200px;

width:300px;

filter:alpha(opacity=100);/*IE*/

opacity:1;/*Mozilla*/

}

</style>

</head>

<body>

<div id="div1">透明层测试</div>

</body>

</html>

控制层的显示

修改style.display，例子：切换层的显示

function togglediv() {

var div1 = document.getElementById('div1');

if (div1.style.display == '') {

div1.style.display = 'none';//不显示

}

else {

div1.style.display = '';//显示

}

}//与元素对象.enabled=true或readonly=true等不一样，这里是样式，不是元素的直接属性，不能用true或false。

案例：注册页面，点击“高级”CheckBox，则显示高级选项，否则隐藏。//动态创建层，移除。

<head>

<title></title>、

div

{

width:200px;

height:200px;

background-color:Red;

}

</style>

function f1(btn) {

var div = document.getElementById("d");

if (div.style.display == "") {

div.style.display = "none";

btn.value = "显示";

} else {

div.style.display = "";

btn.value = "隐藏";

}

</script>

</head>

<body>

</body>

</html>

案例：鼠标放到超链接上的时候显示一个图片或文字（放到div中。）

<head>

<title>评分控件好看版</title>

#d1 {

width: 200px;

height: 300px;

border: solid 1px red;

display: none;

position: absolute;

}

</style>

window.onload = function () {

var links = document.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {

links[i].onmouseover = function () {

var div = document.getElementById("d1");

div.style.top = event.clientY + "px";

div.style.left = event.clientX + "px";

div.style.display = "block";

}

links[i].onmouseout = function () {

var div = document.getElementById("d1");

div.style.display = "none";

}

</script>

</head>

<body>

<a href="javascript:void(0)">cnbeta</a><br /><br /><br /><br />

</body>

</html>

动态设置元素的位置、大小

通过dom读取元素的top、left、width、height等取到的值不是数字，而是“10px”这样的字符串；为这些属性设值的时候IE可以是80、90这样的数字，FF、Chrome必须是“80px”、“90%”等这样的字符串形式，为了兼容统一用字符串形式。left/top需要设置position
易错：不要写成div1.style.width=80px，而是div1.style.width=‘80px’;例：

<head>

#d1 {

width: 200px;

height: 300px;

border: solid 1px red;

/*display: none;*/

position: absolute;

}

</style>

function f1() {

var div = document.getElementById("d1");

var width = div.style.width;

var height = div.style.height;

div.style.width = parseInt(width) + 20 + "px";

div.style.height = parseInt(height) + 20 + "px";

}

</script>

</head>

<body>

</body>

</html>

如果要修改元素的大小（宽度加1），则首先要取出元素的宽度，然后用parseInt将宽度转换为数字（parseInt可以将“20px”这样数字开头的包含其他内容的字符串解析为20，parseInt(‘22px’,10)，也就是解析尽可能多的部分）；然后加上一个值，再加上px赋值回去。
案例：层的动态改变大小。setInterval();

<head>

window.onload = function () {

var tbObj = document.getElementById('tb');

var trObj = tbObj.insertRow(1);

var td1 = trObj.insertCell(-1);

td1.innerHTML = 'T1';

var td2 = trObj.insertCell(0);

td2.innerHTML = 't2';

document.getElementById('btn1').onclick = function () {

var iid = setInterval(function () {

var h = document.getElementById('dv1').style.height;

h = parseInt(h) - 2;

if (h < 0) {

clearInterval(iid);

document.getElementById('dv1').style.display = 'none';

} else {

document.getElementById('dv1').style.height = h + 'px';

document.getElementById('dv1').style.overflow = 'hidden';

}

}, 10);

};

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

IE中body的事件范围

IE中如果在body上添加onclick、onmousemove等事件响应，那么如果页面没有满，则 “body 中最后一个元素以下（横向不限制）” 的部分是无法响应事件的，必须使用代码在document上监听那些事件，比如document.onmousemove = movePic
document.body.onmousedown=function(){}
document.onmousedown=function(){}
注意加文档定义与不加文档定义的也不一样。
如果为整个文档注册事件可以使用：document.onxxxx事件。

层的操作

元素的position 样式值：static（无定位，显示在默认位置）、absolute（绝对定位）、fixed（相对于窗口的固定定位，位置不会随着浏览器的滚动而变化，IE6不支持）、relative（相对元素默认位置的定位）。如果要通过代码修改元素的坐标则一般使用absolute，然后修改元素的top（上边缘距离）、左边缘距离）两个样式值。left、top都是指的层的左上角的坐标left（
案例：跟着鼠标飞的图片。提示：鼠标移动的事件是onmousemove（一边移动事件一边触发，而不是移动开始或者移动完成才触发），通过window.event的clientX、clientY属性获得鼠标的位置。

<head>

img

{

position:absolute;

}

</style>

document.onmousemove = function () {

var img = document.getElementById("i1");

img.style.top = event.clientY - 20 + "px";

img.style.left = event.clientX - 10 + "px";

//获取标签的自定义属性在ie中可以直接 img.aa 但是其他浏览器不支持

//alert(img.getAttribute("aa"));

}

</script>

</head>

<body >

</body>

</html>

案例：鼠标放到一个超链接的时候，在鼠标的位置显示一个黄色背景，带图片的悬浮提示，鼠标离开就消失。提示：鼠标进入控件的事件是onmouseover，离开的事件是onmouseout。

<head>

.cls

{

width:200px;

height:300px;

border:1px solid red;

position:absolute;

}

</style>

window.onload = function () {

var links = document.getElementsByTagName("a");

for (var i = 0; i < links.length; i++) {

links[i].onmouseover = function () {

var div = document.createElement("div");

div.id = "d1";

div.className = "cls";

div.innerHTML = "详细内容";

div.style.top = event.clientY + "px";

div.style.left = event.clientX + "px";

document.body.appendChild(div);

};

links[i].onmouseout = function () {

var div = document.getElementById("d1");

if (div) {

document.body.removeChild(div);

}

</script>

</head>

<body>

<a href="">baidu</a>

</body>

</html>

案例：点击按钮层动态变大。提示：英文字母连续单词不会在中间自动换行的陷阱overflow、word-break: break-all;(查手册。)

<head>

.cls

{

width:200px;

height:300px;

border:1px solid red;

position:absolute;

}

</style>

var slideShowIntervalId;

function slideShow() {

var testDiv = document.getElementById('testDiv');

var hasChange = false;

var oldWidth = parseInt(testDiv.style.width, 10);

var oldHeight = parseInt(testDiv.style.height, 10);

if (oldWidth <= 200) {

testDiv.style.width = (oldWidth + 10) + "px";

hasChange = true;

}

if (oldHeight <= 20) {

testDiv.style.height = (oldHeight + 1) + "px";

hasChange = true;

}

if (!hasChange) {

clearInterval(slideShowIntervalId);

}

</script>

</head>

<body>

<div id="testDiv" style="position:absolute;width:0px;height:0px;top:100px;height:100px;border-color:Green;border-style:dotted;border-width:1px;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈爱好哈哈哈哈哈哈哈哈哈哈哈哈哈</div>

</body>

</html>

问题

易错：不要写成div1.style.width=80px，而是div1.style.width='80px'
修改元素的样式不能this.style="background-color:Red"，哪怕可以的话也是把以前所有样式都冲掉了。单独修改控件的样式this.style. background='red'，只修改要修改的样式。技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。
createElement的两种用法，注意innerText的问题
- var input = document.createElement(“<input type=‘button’ value=‘hello’/>”)快速创建元素，并且赋值，但是注意设置的inner部分不会被设置var link = document.createElement(“<a href=‘http://www.baidu.com’>百度</a>”)（“百度”二字写不进去）
label.setAttribute(“for”, “username”); //设定一些Dom元素属性名特殊的属性,label.for = “username”会有问题。label.setAttribute(“xuehao”,“33333”)//getAttribute(“name”)

案例练习

练习1：点击【登录】按钮，弹出一个显示用户名、密码等的层。将用户名、密码等写到一个层中，层默认是隐藏的，点击【登录】超链接以后将层显示出来，如果点击层中的关闭按钮，则隐藏层。绝对定位，显示到中间位置。document.body.clientWidth(获取页面的width)//高度，注意body的默认范围。（去掉<doc type）；margin:0 auto;。

<head>

#login {

width:300px;

height:150px;

border:1px solid red;

position:absolute;

display:none;

}

</style>

function show()

{

var div = document.getElementById("login");

div.style.display = "block";

var x = (document.documentElement.clientWidth - div.clientWidth) / 2;

var y = (document.documentElement.clientHeight - div.clientHeight) / 2;

div.style.top = y + 'px';

div.style.left = x + "px";

}

function hide()

{

var div =document.getElementById("login");

if (div)

{

div.style.display="none";

}

function f1()

{

var div = document.getElementById("login");

if (div && div.style.display == "block")

{

show();

}

</script>

</head>

</div>

</body>

</html>

练习2：一幅图片。点击小图，弹出一个层在点击的位置显示小图对应的大图，并且显示姓名、、身高等信息，点击层中的关闭按钮关闭层。进阶：元素的额外属性。动画效果的显示出来。两种：静态；动态载入数据。

<head>

#tooltip

{

width:500px;

height:600px;

border:solid 1px red;

position:absolute;

}

</style>

window.onload = function () {

var json = { "1.jpg": { "name": "西施", "height": 170, "weight": 50 },"2.jpg": { "name": "苍老师", "height": 156, "weight": 60 },"4.jpg": { "name": "郭老师", "height": 160, "weight": 100 }

}

var div = document.getElementById("mv");

for (var key in json) {

//动态生成小图片

var img = document.createElement("img");

img.src = "images/" + key;

img.setAttribute("width", 100);

//img动态生成的时候默认把图片原始的高宽设置了。

//移除 img标签的height属性

img.removeAttribute("height");

img.style.marginLeft = "10px";

img.setAttribute("name", json[key].name);

img.setAttribute("a1", json[key].height);

img.setAttribute("weight", json[key].weight);

div.appendChild(img);

//注册小图的事件

img.onmouseover = function () {

//鼠标放上创建详细层

var div = document.createElement("div");

div.id = "tooltip";

div.style.top = event.clientY + "px";

div.style.left = event.clientX + "px";

document.body.appendChild(div);

var img = document.createElement("img");

img.src = this.src;

img.setAttribute("width", 200);

//img动态生成的时候默认把图片原始的高宽设置了

//移除 img标签的height属性

img.removeAttribute("height");

div.appendChild(img);

var p = document.createElement("p");

p.innerHTML = "姓名:" + this.getAttribute("name") + "<br />";

p.innerHTML += "身高:" + this.getAttribute("a1") + "<br />";

p.innerHTML += "体重:" + this.getAttribute("weight") + "<br />";

div.appendChild(p);

}

img.onmouseout = function () {

var div = document.getElementById("tooltip");

if (div) {

document.body.removeChild(div);

}

</script>

</head>

<body>

</body>

</html>

作业：评分控件V2。用一个单行5列的Table，td中默认都是starEmpty.jpg这个图片。监听td的mouseover事件，鼠标在一个td的时候将这个td及之前的td的内容换成starFill.jpg这个图片。鼠标在评分控件上的时候显示超链接形式的鼠标图标。获取td中的img见备注3。

<head>

window.onload = function () {

var tb = document.getElementById("rating");

//找的是所有td。子td 子子td 。。。。

var tds = tb.getElementsByTagName("td");

for (var i = 0; i < tds.length; i++) {

//children 获取元素节点（标签）

tds[i].children[0].src = "starFill.jpg";

//alert(tds[i].childNodes[0].nodeType);

//如果是其它浏览器childNodes会获取空白节点，ie会忽略空白节点

//tds[i].childNodes[0].src = "starFill.jpg";

}

</script>

</head>

<body>

<tr>

</tr>

</table>

</body>

</html>

案例：注册页面，点击“高级”CheckBox，则显示高级选项，否则隐藏

练习：界面上有几个球队名字的列表，将鼠标放到球队名字上就变为红色背景，其他球队背景颜色为白色，点击一个球队的时候就将点击的球队变为fontSize=30字体(fontSize=‘’回到默认)。Ul→li

<head>

window.onload = function () {

var ul = document.getElementById("mv");

var lists = ul.getElementsByTagName("li");

for (var i = 0; i < lists.length; i++) {

lists[i].style.cursor = "pointer";

lists[i].onclick = function ()

{

for (var j= 0; j < lists.length; j++)

{

lists[j].style.fontSize = "";

lists[j].style.backgroundColor = "white";

}

this.style.fontSize = "30px";

this.style.backgroundColor = "red";

}

</script>

</head>

<body>

</ul>

</body>

</html>

练习：显示数字时钟，时间显示到一个div中。思路：setInterval()\innerHTMl

<head>

window.onload = function () {

var div = document.getElementById("d1");

setInterval(function () {

var date = new Date();

var hour = date.getHours();

var minute = date.getMinutes();

var sec = date.getSeconds();

div.innerHTML = check(hour) +":"+ check(minute) +":"+ check(sec);

},1000

);

}

function check(num)

{

return num<10?"0"+num:num;

}

</script>

</head>

<body>

</body>

</html>

练习：有一个搜索文本框，焦点不在文本框中的时候，如果文本框没有值，则文本框中显示灰色文本（Gray）的“输入搜索关键词”，否则显示用户输入的值；焦点在文本框中时如果之前显示“输入搜索关键词”则清空文本框的值，并且将文本修改为黑色。onfocus的时候如果文本框中的值为“输入搜索关键词”，则清空文本框，并且恢复文本框的颜色为Black；onblur的时候如果文本框中没有值，则将文本框的值设置为“输入搜索关键词”并且文本框中显示灰色文本（Gray）style.color='Gray'。（五分钟）

<head>

window.onload = function () {

var t = document.getElementById("txt");

t.onfocus = function () {

if (this.value == "请输入搜索关键字") {

this.value = "";

this.style.color = "black";

}

t.onblur = function () {

if (this.value.length == 0 || this.value == "请输入搜索关键字") {

this.value = "请输入搜索关键字";

this.style.color = "gray";

}

</script>

</head>

<body>

</body>

</html>

form对象

document.getElementById(‘btn1’).click()。搜索引擎的，智能提示，点击后相当于点击了“搜索”按钮。
常用：click(),focus(),blur();//相当于通过程序来触发元素的单击、获得焦点以及失去焦点的事件。
form对象是表单的Dom对象。
方法：submit()提交表单，但是不会触发onsubmit事件。
实现autopost，也就是焦点离开控件以后页面立即提交，而不是只有提交submit按钮以后才提交，当光标离开的时候触发onblur事件，在onblur中调用form的submit方法。代码见备注。
在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，如果数据有问题，返回false即可取消提交
<form name="form1" action="a.aspx" method="get" onsubmit="if(document.getElementById('txtname').value.length<=0){alert('姓名必填');return false;}">

例：

<head>

window.onload = function () {

//btn.click();

//winform中类似的操作

//btn.performClick();

//表单自动提交form.submit();

var t = document.getElementById("txt");

t.onblur = function () {

var form = document.getElementById("f1");

//判断文本框的值是否为空

if (checkInput()) {

form.submit();

}

function checkInput() {

var name = document.getElementById("txt").value;

if (name.length == 0) {

alert("请输入用户名");

document.getElementById("txt").focus();

return false;

}

return true;

}

//onsubmit 只有当点击submit按钮的时候才会触发

// 调用表单的submit()方法不会触发表单的onsubmit事件

</script>

</head>

<body>

</form>

</body>

</html>

不同浏览器的差异

面试题：说说开发项目的时候不同浏览器的不同点，你是怎么解决的？appendChild,insertCell,px
不同浏览器中对DOM支持的方法不一样
- 获取网页中那个元素触发了事件：在IE里使用srcElement ；在FireFox里使用target
- 使用Dom获取和更改网页标签元素内文本：在IE里使用innerText ；在FireFox里使用textContent
- 动态为网页或元素绑定事件：在IE中绑定事件的方法是attachEvent ；在FireFox中绑定事件的方法是addEventListener （类似于多播委托。使用该方法是还有一些其他的注意事项）
- 更多FF与IE对javascript和CSS的区别。
不同浏览器中对CSS的支持不一样，所以出现在IE中显示正常的网页，在FF下全部乱掉了。哀悼网页使用的CSS只有IE支持，FF都不支持。filter:gray;
JQuery之类的框架进行了封装，将不同浏览器的差异帮开发人员处理了，开发人员只要调用JQuery的方法，JQuery会帮助在不同浏览器中进行翻译。用JQuery就可以解决不同浏览器上Dom的不同。对于CSS的不同是美工的事，IETester、FF、Chrome。

JS中的正则表达式

JavaScript中创建正则表达式类的方法：
- 1.var regex = new RegExp("\\d{5}") 或者 2.var regex = / \d{5} /
- /表达式/是JavaScript中专门为简化正则表达式编写而提供的语法，写在//中的正则表达式就不用管转义符了。
RegExp对象的方法：

（1）test(str)判断字符串str是否匹配正则表达式，相当于IsMatch

var regex = /.+@.+/;

alert(regex.test("a@b.com"));

alert(regex.test("ab.com"));

（2）exec(str)进行搜索匹配，返回值为匹配结果(*)，相当于c#中match()和matches()

- - 如果 exec() 找到了匹配的文本，则返回一个结果数组（完全匹配的字符串以及提取组的结果。）。否则，返回 null。要提取多个需要反复调用exec()类似于matches()方法。//注意全局模式/…../g
  - 在非全局模式下，调用一次exec()相当于match()；在全局模式下连续多次调用相当于matches()

注：

RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

直接量语法

/pattern/attributes 创建 RegExp 对象的语法：

new RegExp(pattern, attributes); 参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、忽略大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

exec() 方法的功能非常强大，它是一个通用的方法，而且使用起来也比 test() 方法以及支持正则表达式的 String 对象的方法更为复杂。

如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），以此类推。除了数组元素和 length 属性之外，exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，返回的数组与调用方法 String.match() 返回的数组是相同的。

但是，当 RegExpObject 是一个全局正则表达式时，exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时，在匹配后，它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说，您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时，它将返回 null，并把 lastIndex 属性重置为 0。

string的正则表达式方法

String对象中提供了一些与正则表达式相关的方法，相当于对于RegExp类的包装，简化调用：

match(regexp)，非全局模式下相当于调用exec(),全局模式下相当于调用c#的matches()，返回数组中是所有的匹配结果（不包含提取组的信息）。

var s = "aaa@163.com";

var regex = /(.+)@(.+)/;

var match = s.match(regex);

alert(RegExp.$1 + "，服务器：" + RegExp.$2);

字符串.replace(/(正)则/g,”要替换的字符串$1”);//替换手机号码，只显示后4位。手机尾号为：*******1234

例：

var str = "15028008001";

alert(str.replace(/\d{7}/, "*******"));

练习：光标离开Email地址框的时候用正则表达式校验是否是合法的Email地址，如果不是的话Email地址框变红，并且注册按钮禁用，否则Email地址框颜色为白色，启用注册按钮。

<head>

window.onload = function () {

var t = document.getElementById("txtMail");

t.onblur = function () {

var reg = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

if (!reg.test(this.value)) {

this.style.backgroundColor = "red";

document.getElementById("btn").disabled = true;

}

else {

this.style.backgroundColor = "white";

document.getElementById("btn").disabled = false;

}

</script>

</head>

<body>

</body>

</html>

练习：模拟Trim()方法

var str = ' aaaaaaaaaaa ';

alert('---' + exTrim(str) + '-----');

function exTrim(s) {

return s.replace(/(^\s+)|(\s+$)/g, '');

}

=================高效===========================

String.prototype.trim = function () {

return this.replace(/^\s+/,'').replace(/\s+$/,'');

};

//不要写一个复杂的正则表达式，尤其是带或(|)的。尽量写简单的容易匹配的到的正则表达式，这样才高效。

练习：评估密码强度。

弱密码：只由数字、字母或其他符号中的一种组成。

- 中度密码：由数字、字母或其他字符中的两种组成。
- 强密码：由数字、字母或其他字符3种以上组成。
- 密码少于6位安全级别降1级

<head>

.left

{

width:80px;

text-align:right;

}

#pwdStrong td

{

width:30px;

background-color:Gray;

text-align:center;

}

</style>

window.onload = function () {

var txt = document.getElementById("txtPwd");

txt.onkeyup = function () {

var t = this.value;

var table = document.getElementById("pwdStrong");

var tds = table.getElementsByTagName("td");

var num = getLevel(t);

if (num == 1 || num ==0) {

//弱密码

tds[0].style.backgroundColor = "red";

tds[1].style.backgroundColor = "gray";

tds[2].style.backgroundColor = "gray";

}

else if (num == 2) {

tds[0].style.backgroundColor = "red";

tds[1].style.backgroundColor = "red";

tds[2].style.backgroundColor = "gray";

}

else if (num == 3) {

tds[0].style.backgroundColor = "red";

tds[1].style.backgroundColor = "red";

tds[2].style.backgroundColor = "red";

}

else {

tds[0].style.backgroundColor = "gray";

tds[1].style.backgroundColor = "gray";

tds[2].style.backgroundColor = "gray";

}

///获取密码强度

function getLevel(v) {

var num = 0;

var reg = /\d/;

if (reg.test(v)) {

num++;

}

reg = /[a-zA-Z]/;

if (reg.test(v)) {

num++;

}

reg = /[^0-9a-zA-Z]/;

if (reg.test(v)) {

num++;

}

if (v.length < 6) {

num--;

}

return num;

}

</script>

</head>

<body>

<table>

<tr>

<td>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>

HTML、JS的压缩

HTML、JavaScript的压缩和混淆。去掉空格、缩短变量名，让js、html尺寸更小，提高下载速度。
HTML、JS压缩、混淆有动态和静态两种方案。HTML压缩器，比如HTML Compress，JavaScript压缩工具：Google Closure Compiler、YUI Compressor 、 JsPacker等。
很多js库都提供了.min.js、compress.js的压缩版本。gzip
- 1.安装jdk
- 2.配置环境变量(path)
- 3.开始压缩。

Js中的一些习惯与性能问题

1.声明变量要赋初值var n=10。
2.尽量避免直接声明全局变量，比如要声明全局变量name,但是它有可能与window.name冲突，所以全局变量一般都会声明在一个全局对象中：var itcast={name:’zxh’,num:10};使用这些全局变量的时候通过itcast.name或者itcast.num，就可以减少与系统的重名了。
3.当编写大量Js代码的时候难免会遇到命名冲突的问题，这时可以通过模拟命名空间的方式来避免命名冲突。例如：
- var itcast={};
- var itcast.net={};
- var itcast.net.net0405={name:’zxh’,sayHi=function(){}};
4.尽量避免使用全局变量。（搜索全局变量时，会一层一层的搜索每个作用域范围，耗时，低效）
5.使用减值循环或者优化循环条件，不要在循环条件中写i<xxx.length而要用一个变量来代替，i<len。因为循环条件每次都会执行，这样的话每次都会计算xxx.length。

var arr = [3, 6, 9];

for (var i = 0, length = arr.length; i < length; i++)

{

alert(arr[i]);

}

6.避免使用eval(“alert(10);”);或setInterval(“myFunc();”,1000);这种双重解析的代码。低效！
7.使用原生的方法，比如内置的join()、reverse()，使用这些本来浏览器就有的方法不要自己写myJoin()之类的，性能低。原生方法都是用c或者c++写的，性能高。
8.尽可能使用switch来代替多个if-else
9.尽量减少语句数量：
用var n1=10,m=‘hello’,n2=true;而不是var n1=10;var m=‘hello’;var n2=true;
var arr=[1,2,’a’,true];
var p1={name:’zxh’,age:18};//创建对象
10.使用文档碎片，避免多次更新页面。
var fragment=document.createDocumentFragment();

案例1：回车实现Tab跳转。响应文本框的onKeyDown事件，window.event.keyCode获得用户点击的keyCode。（*）keyCode和ASCII不是完全一致，主键盘的1和小键盘的1的ASCII一样，但是keyCode不一样。详见备注。回车的keyCode为13，Tab的keyCode为9。if(window.event.keyCode == 13){window.event.keyCode = 9;}

只有少数的键才能被替换，大部分是不行的，有权限问题。
键盘码与ASCII码不一样。

注：ascii码说明：

8：退格键

46：delete

37-40：方向键

48-57：小键盘区的数字

96-105：主键盘区的数字

110、190：小键盘区和主键盘区的小数点

189、109：小键盘区和主键盘区的负号

<head>

document.onkeydown = function () {

if (event.keyCode == 13) {

event.keyCode = 9;

}

</script>

</head>

<body>

</body>

按下回车键，触发click事件

</html>

<head>

document.onkeydown = function () {

if (event.keyCode == 13) {

var btn = document.getElementById("btn");

btn.click();

}

</script>

</head>

<body>

</body>

</html>

案例：实现省市选择界面。请选择省的处理，从后向前删。//document.getElementById(‘selCity’).innerHTML = ‘’;可删除select中的所有option.（或者通过while+firstChild方式删除，见备注1.）

<head>

var data = { "山东": ["济南", "青岛", "潍坊"], "河北": ["石家庄", "廊坊", "保定"], "河南": ["郑州", "南阳", "三门峡"] };

window.onload = function() {

loadProv();

prov_change()

}

function loadProv() {

var prov = document.getElementById("prov");

for (var key in data) {

var option = document.createElement("option");

option.value = key;

option.innerText = key;

prov.appendChild(option);

}

function prov_change() {

var prov = document.getElementById("prov");

var city = document.getElementById("city");

//清除旧数据

for (var i = city.childNodes.length - 1; i >= 0; i--) {

city.removeChild(city.childNodes[i]);

}

var cities = data[prov.value];

for (var i = 0; i < cities.length; i++) {

var option = document.createElement("option");

option.innerText = cities[i];

city.appendChild(option);

}

</script>

</head>

<body>

</body>

</html>

练习：歌曲列表（CheckBox+Label）全选、全不选、反选，只针对一个层中，div.getElementsByTagName("input")，再判断type='checkbox'的项，checked="checked"。if(cb.checked==“checked”){//用调试，期望的和实际的。在js中true和false,不要用checked=“checked”或disabled=“disabled”。Js与html代码不同。
练习：权限选择页面，选择、撤回、全部选择、全部撤回。代码参考“实现省市选择界面”，因为可能多选，判断选择项和单选的会有不同。不用写四个方法，两个方法就够了。（moveAll(arg1,arg2)、moveSelected(arg1,arg2)）使用insertBefore(new,sel2.firstChilde)解决顺序问题。

<head>

function move(all,sel) {

//选中的option

for (var i = all.children.length-1; i>=0 ; i--) {

if (all.children[i].selected) {

//appendChild 把页面上的元素进行移动

var op = all.children[i];

op.selected = false;

//把op插入到select 中的第一个元素之前

sel.insertBefore(op, sel.firstChild);

}

</script>

</head>

<body>

</select>

<input type="button" value=">" onclick="move(document.getElementById('all'),document.getElementById('sel'))" />

</body>

</html>

案例代码阅读，模拟对话框。见备注(*)先创建一个满浏览器的层，设定透明度，有遮挡的效果，然后再创建一个层（ZIndex>遮挡层的ZIndex）显示对话框内容。

<html>

<head>

function sAlert(str) {

var msgw, msgh, bordercolor;

msgw = 300; //提示窗口的宽度

msgh = 200; //提示窗口的高度

titleheight = 25 //提示窗口标题高度

bordercolor = "#FF3C00"; //提示窗口的边框颜色

titlecolor = "#D2CECE"; //提示窗口的标题颜色

var sWidth, sHeight;

//sWidth=document.body.offsetWidth; //得出当前屏幕的宽

sWidth = document.body.clientWidth; //BODY对象宽度

//sHeight=screen.height;//得到当前屏幕的高

//sHeight=document.body.clientHeight;//BODY对象高度

if (window.innerHeight && window.scrollMaxY) {

sHeight = window.innerHeight + window.scrollMaxY;

}

else if (document.body.scrollHeight > document.body.offsetHeight) {

sHeight = document.body.scrollHeight;

}

else {

sHeight = document.body.offsetHeight;

} //以上得到整个屏幕的高

var bgObj = document.createElement("div"); //创建一个div对象

bgObj.setAttribute('id', 'bgDiv'); //可以用bgObj.id="bgDiv"的方法，是为div指定属性值

bgObj.style.position = "absolute"; //把bgDiv这个div绝对定位

bgObj.style.top = "0"; //顶部为0

bgObj.style.background = "#777"; //背景颜色

bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)"; //ie浏览器透明度设置

bgObj.style.opacity = "0.6"; //透明度(火狐浏览器中)

bgObj.style.left = "0"; //左边为0

bgObj.style.width = sWidth + "px"; //宽(上面得到的屏幕宽度)

bgObj.style.height = sHeight + "px"; //高(上面得到的屏幕高度)

bgObj.style.zIndex = "100"; //层的z轴位置

document.body.appendChild(bgObj);

var msgObj = document.createElement("div")//创建一个div对象

msgObj.setAttribute("id", "msgDiv"); //可以用bgObj.id="msgDiv"的方法，是为div指定属性值

msgObj.setAttribute("align", "center"); //为div的align赋值

msgObj.style.background = "white"; //背景颜色为白色

msgObj.style.border = "1px solid " + bordercolor; //边框属性，颜色在上面已经赋值

msgObj.style.position = "absolute"; //绝对定位

msgObj.style.left = "35%"; //从左侧开始位置

msgObj.style.top = "30%"; //从上部开始位置

msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; //字体属性

//msgObj.style.marginLeft = "-225px";//左外边距

//msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";//上外边距

msgObj.style.width = msgw + "px"; //提示框的宽(上面定义过)

msgObj.style.height = msgh + "px"; //提示框的高(上面定义过)

msgObj.style.textAlign = "center"; //文本位置属性，居中。

msgObj.style.lineHeight = "25px"; //行间距

msgObj.style.zIndex = "101"; //层的z轴位置

var title = document.createElement("h4"); //创建一个h4对象

title.setAttribute("id", "msgTitle"); //为h4对象填加标题

title.setAttribute("align", "right"); //文字对齐方式

title.style.margin = "0"; //浮动

title.style.padding = "3px"; //浮动

title.style.background = titlecolor; //背景颜色

title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";

title.style.opacity = "0.75"; //透明

//title.style.border="1px solid " + bordercolor;//边框

title.style.height = "25px"; //高度

title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif"; //字体属性

title.style.color = "white"; //文字颜色

title.style.cursor = "pointer"; //鼠标样式

title.innerHTML = "<a href=\"#\">关闭</a>"; //显示的文字

title.onclick = function () {

document.body.removeChild(bgObj); //移除遮罩层

document.getElementById("msgDiv").removeChild(title); //在提示框中移除标题

document.body.removeChild(msgObj); //移除提示框

}

document.body.appendChild(msgObj); //在body中画出提示框层

document.getElementById("msgDiv").appendChild(title); //在提示框中增加标题

var txt = document.createElement("p");

txt.style.margin = "1em 0"; //文本浮动

txt.setAttribute("id", "msgTxt"); //为p属性增加id属性

txt.innerHTML = str; //把传进来的值赋给p属性

document.getElementById("msgDiv").appendChild(txt); //把p属性增加到提示框里

}

</script>

</head>

<body>

<a href="#" onclick="sAlert('<a href=http://www.it300.net>测试效果</a>');return false;">点击测试</a>

</body>

</html>

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

JavaScript动态创建DOM（七）

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

JavaScript动态创建DOM（七）

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品