|
|
| 关键字 |
简介 |
示例代码 |
|
document.getElementById
|
通过id获取元素节点
|
示例代码
|
|
getElementsByTagName
|
通过标签名称获取元素节点
|
示例代码
|
|
getElementsByClassName
|
通过类名获取元素节点
|
示例代码
|
|
getElementsByName
|
通过表单元素的name获取元素节点
|
示例代码
|
|
null
|
为什么会获取不到?
|
示例代码
|
|
attributes
|
获取属性节点
|
示例代码
|
|
childNodes
|
获取内容节点
|
示例代码
|
示例
1
:
通过id获取元素节点
示例
2
:
通过标签名称获取元素节点
示例
3
:
通过类名获取元素节点
示例
4
:
通过表单元素的name获取元素节点
示例
5
:
为什么会获取不到?
示例
6
:
获取属性节点
示例
7
:
获取内容节点
在设计html的时候，一个元素对应的id应该是唯一的。
可以通过document.getElementById 获取某个元素对应的元素节点对象
");
window.frames["iframe_show953"].document.write(decodeHtml($("textarea#stepcodeTextarea953").val()));
window.frames["iframe_show953"].document.close();
$(window.frames["iframe_show953"]).load(function(){
$("#iframe_show953").height($("#iframe_show953").contents().find("body").height()+showittryitheight);
});
$("#iframe_show953").height($("#iframe_show953").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<html>
<div id="d1">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
");
window.frames["iframe953"].document.write(decodeHtml(code953));
window.frames["iframe953"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe953"]).load(function(){
$("#iframe953").height($("#iframe953").contents().find("body").height()+showittryitheight);
});
$("#iframe953").height($("#iframe953").contents().find("body").height()+showittryitheight);
alreadyWriteCode953 = code953;
$("#rendering953").hide();
$("#rendered953").show();
}
var tRereshRetry2DemoPanel953 = setInterval(rereshRetry2DemoPanel953,1000);
var binded953 = false;
$("textarea#stepcodeTextarea953").keyup(function(){
if(!binded953){
$(window).bind('beforeunload',function(){
binded953 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code953 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code953!=newCode){
// window.frames["iframe953"].document.write("
");
// window.frames["iframe953"].document.write(decodeHtml($("textarea#stepcodeTextarea953").val()));
// window.frames["iframe953"].document.close();
// $(window.frames["iframe953"]).load(function(){
// $("#iframe953").height($("#iframe953").contents().find("body").height()+showittryitheight);
// });
// code953 = newCode;
// }
});
$(".tryButton953").click(function(){
$("#tryDiv953").show();
$("#stepcodeTextarea953").focus();
$("#stepcodeTextarea953").height(200);
$("#iframe953").height(0);
window.frames["iframe953"].document.write("
");
window.frames["iframe953"].document.write(decodeHtml($("textarea#stepcodeTextarea953").val()));
window.frames["iframe953"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe953"]).load(function(){
$("#iframe953").height($("#iframe953").contents().find("body").height()+showittryitheight);
});
$("#iframe953").height($("#iframe953").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor953.focus();
editor953.setSize(null, "250");
$("#rendering953").hide();
$("#rendered953").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor953 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea953"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor953.on("change",function(doc){
if(!binded953){
$(window).bind('beforeunload',function(){
binded953 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code953 = newCode;
$("textarea#stepcodeTextarea953").val(newCode);
if(alreadyWriteCode953!=code953){
lastModifedTime953 = new Date().getTime();
$("#rendering953").show();
$("#rendered953").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor953 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor953.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv953").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
所有的元素都有标签名
通过 getElementsByTagName 根据标签名称获取一个元素数组。
");
window.frames["iframe_show954"].document.write(decodeHtml($("textarea#stepcodeTextarea954").val()));
window.frames["iframe_show954"].document.close();
$(window.frames["iframe_show954"]).load(function(){
$("#iframe_show954").height($("#iframe_show954").contents().find("body").height()+showittryitheight);
});
$("#iframe_show954").height($("#iframe_show954").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
</html>
<html>
<div >hello javascript</div>
<div >hello BOM</div>
<div >hello DOM</div>
<br>
<script>
var divs = document.getElementsByTagName("div");
for(i=0;i<divs.length;i++){
document.write(divs[i]);
document.write("<br>");
}
</script>
</html>
");
window.frames["iframe954"].document.write(decodeHtml(code954));
window.frames["iframe954"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe954"]).load(function(){
$("#iframe954").height($("#iframe954").contents().find("body").height()+showittryitheight);
});
$("#iframe954").height($("#iframe954").contents().find("body").height()+showittryitheight);
alreadyWriteCode954 = code954;
$("#rendering954").hide();
$("#rendered954").show();
}
var tRereshRetry2DemoPanel954 = setInterval(rereshRetry2DemoPanel954,1000);
var binded954 = false;
$("textarea#stepcodeTextarea954").keyup(function(){
if(!binded954){
$(window).bind('beforeunload',function(){
binded954 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code954 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code954!=newCode){
// window.frames["iframe954"].document.write("
");
// window.frames["iframe954"].document.write(decodeHtml($("textarea#stepcodeTextarea954").val()));
// window.frames["iframe954"].document.close();
// $(window.frames["iframe954"]).load(function(){
// $("#iframe954").height($("#iframe954").contents().find("body").height()+showittryitheight);
// });
// code954 = newCode;
// }
});
$(".tryButton954").click(function(){
$("#tryDiv954").show();
$("#stepcodeTextarea954").focus();
$("#stepcodeTextarea954").height(200);
$("#iframe954").height(0);
window.frames["iframe954"].document.write("
");
window.frames["iframe954"].document.write(decodeHtml($("textarea#stepcodeTextarea954").val()));
window.frames["iframe954"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe954"]).load(function(){
$("#iframe954").height($("#iframe954").contents().find("body").height()+showittryitheight);
});
$("#iframe954").height($("#iframe954").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor954.focus();
editor954.setSize(null, "250");
$("#rendering954").hide();
$("#rendered954").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor954 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea954"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor954.on("change",function(doc){
if(!binded954){
$(window).bind('beforeunload',function(){
binded954 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code954 = newCode;
$("textarea#stepcodeTextarea954").val(newCode);
if(alreadyWriteCode954!=code954){
lastModifedTime954 = new Date().getTime();
$("#rendering954").show();
$("#rendered954").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor954 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor954.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv954").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组
");
window.frames["iframe_show955"].document.write(decodeHtml($("textarea#stepcodeTextarea955").val()));
window.frames["iframe_show955"].document.close();
$(window.frames["iframe_show955"]).load(function(){
$("#iframe_show955").height($("#iframe_show955").contents().find("body").height()+showittryitheight);
});
$("#iframe_show955").height($("#iframe_show955").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<h1 class="d" >hello javascript</h1>
<h2 class="d" >hello BOM</h2>
<div class="d" >hello DOM</div>
<br>
<script>
var elements= document.getElementsByClassName("d");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
<html>
<h1 class="d" >hello javascript</h1>
<h2 class="d" >hello BOM</h2>
<div class="d" >hello DOM</div>
<br>
<script>
var elements= document.getElementsByClassName("d");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
");
window.frames["iframe955"].document.write(decodeHtml(code955));
window.frames["iframe955"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe955"]).load(function(){
$("#iframe955").height($("#iframe955").contents().find("body").height()+showittryitheight);
});
$("#iframe955").height($("#iframe955").contents().find("body").height()+showittryitheight);
alreadyWriteCode955 = code955;
$("#rendering955").hide();
$("#rendered955").show();
}
var tRereshRetry2DemoPanel955 = setInterval(rereshRetry2DemoPanel955,1000);
var binded955 = false;
$("textarea#stepcodeTextarea955").keyup(function(){
if(!binded955){
$(window).bind('beforeunload',function(){
binded955 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code955 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code955!=newCode){
// window.frames["iframe955"].document.write("
");
// window.frames["iframe955"].document.write(decodeHtml($("textarea#stepcodeTextarea955").val()));
// window.frames["iframe955"].document.close();
// $(window.frames["iframe955"]).load(function(){
// $("#iframe955").height($("#iframe955").contents().find("body").height()+showittryitheight);
// });
// code955 = newCode;
// }
});
$(".tryButton955").click(function(){
$("#tryDiv955").show();
$("#stepcodeTextarea955").focus();
$("#stepcodeTextarea955").height(200);
$("#iframe955").height(0);
window.frames["iframe955"].document.write("
");
window.frames["iframe955"].document.write(decodeHtml($("textarea#stepcodeTextarea955").val()));
window.frames["iframe955"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe955"]).load(function(){
$("#iframe955").height($("#iframe955").contents().find("body").height()+showittryitheight);
});
$("#iframe955").height($("#iframe955").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor955.focus();
editor955.setSize(null, "250");
$("#rendering955").hide();
$("#rendered955").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor955 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea955"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor955.on("change",function(doc){
if(!binded955){
$(window).bind('beforeunload',function(){
binded955 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code955 = newCode;
$("textarea#stepcodeTextarea955").val(newCode);
if(alreadyWriteCode955!=code955){
lastModifedTime955 = new Date().getTime();
$("#rendering955").show();
$("#rendered955").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor955 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor955.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv955").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
示例
4
:
通过表单元素的name获取元素节点
顶
折
表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。
");
window.frames["iframe_show2963"].document.write(decodeHtml($("textarea#stepcodeTextarea2963").val()));
window.frames["iframe_show2963"].document.close();
$(window.frames["iframe_show2963"]).load(function(){
$("#iframe_show2963").height($("#iframe_show2963").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2963").height($("#iframe_show2963").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var elements= document.getElementsByName("userName");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
<html>
用户名 <input name="userName"> <br>
密码 <input name="userPassword">
<br>
<script>
var elements= document.getElementsByName("userName");
for(i=0;i<elements.length;i++){
document.write(elements[i]);
document.write("<br>");
}
</script>
</html>
");
window.frames["iframe2963"].document.write(decodeHtml(code2963));
window.frames["iframe2963"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2963"]).load(function(){
$("#iframe2963").height($("#iframe2963").contents().find("body").height()+showittryitheight);
});
$("#iframe2963").height($("#iframe2963").contents().find("body").height()+showittryitheight);
alreadyWriteCode2963 = code2963;
$("#rendering2963").hide();
$("#rendered2963").show();
}
var tRereshRetry2DemoPanel2963 = setInterval(rereshRetry2DemoPanel2963,1000);
var binded2963 = false;
$("textarea#stepcodeTextarea2963").keyup(function(){
if(!binded2963){
$(window).bind('beforeunload',function(){
binded2963 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2963 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2963!=newCode){
// window.frames["iframe2963"].document.write("
");
// window.frames["iframe2963"].document.write(decodeHtml($("textarea#stepcodeTextarea2963").val()));
// window.frames["iframe2963"].document.close();
// $(window.frames["iframe2963"]).load(function(){
// $("#iframe2963").height($("#iframe2963").contents().find("body").height()+showittryitheight);
// });
// code2963 = newCode;
// }
});
$(".tryButton2963").click(function(){
$("#tryDiv2963").show();
$("#stepcodeTextarea2963").focus();
$("#stepcodeTextarea2963").height(200);
$("#iframe2963").height(0);
window.frames["iframe2963"].document.write("
");
window.frames["iframe2963"].document.write(decodeHtml($("textarea#stepcodeTextarea2963").val()));
window.frames["iframe2963"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2963"]).load(function(){
$("#iframe2963").height($("#iframe2963").contents().find("body").height()+showittryitheight);
});
$("#iframe2963").height($("#iframe2963").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2963.focus();
editor2963.setSize(null, "250");
$("#rendering2963").hide();
$("#rendered2963").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2963 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2963"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2963.on("change",function(doc){
if(!binded2963){
$(window).bind('beforeunload',function(){
binded2963 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2963 = newCode;
$("textarea#stepcodeTextarea2963").val(newCode);
if(alreadyWriteCode2963!=code2963){
lastModifedTime2963 = new Date().getTime();
$("#rendering2963").show();
$("#rendered2963").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2963 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2963.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2963").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
参考本例代码，和 通过id获取元素节点同样的代码 document.getElementById却无法获取元素节点。
这是因为javascript是解释语言，是顺序执行的。 在执行到 document.getElementById的时候，div标签 还没有加载，所以无法获取。
");
window.frames["iframe_show1188"].document.write(decodeHtml($("textarea#stepcodeTextarea1188").val()));
window.frames["iframe_show1188"].document.close();
$(window.frames["iframe_show1188"]).load(function(){
$("#iframe_show1188").height($("#iframe_show1188").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1188").height($("#iframe_show1188").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<div id="d1">hello HTML DOM</div>
<html>
<script>
var div1 = document.getElementById("d1");
document.write(div1);
</script>
</html>
<div id="d1">hello HTML DOM</div>
");
window.frames["iframe1188"].document.write(decodeHtml(code1188));
window.frames["iframe1188"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1188"]).load(function(){
$("#iframe1188").height($("#iframe1188").contents().find("body").height()+showittryitheight);
});
$("#iframe1188").height($("#iframe1188").contents().find("body").height()+showittryitheight);
alreadyWriteCode1188 = code1188;
$("#rendering1188").hide();
$("#rendered1188").show();
}
var tRereshRetry2DemoPanel1188 = setInterval(rereshRetry2DemoPanel1188,1000);
var binded1188 = false;
$("textarea#stepcodeTextarea1188").keyup(function(){
if(!binded1188){
$(window).bind('beforeunload',function(){
binded1188 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1188 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1188!=newCode){
// window.frames["iframe1188"].document.write("
");
// window.frames["iframe1188"].document.write(decodeHtml($("textarea#stepcodeTextarea1188").val()));
// window.frames["iframe1188"].document.close();
// $(window.frames["iframe1188"]).load(function(){
// $("#iframe1188").height($("#iframe1188").contents().find("body").height()+showittryitheight);
// });
// code1188 = newCode;
// }
});
$(".tryButton1188").click(function(){
$("#tryDiv1188").show();
$("#stepcodeTextarea1188").focus();
$("#stepcodeTextarea1188").height(200);
$("#iframe1188").height(0);
window.frames["iframe1188"].document.write("
");
window.frames["iframe1188"].document.write(decodeHtml($("textarea#stepcodeTextarea1188").val()));
window.frames["iframe1188"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1188"]).load(function(){
$("#iframe1188").height($("#iframe1188").contents().find("body").height()+showittryitheight);
});
$("#iframe1188").height($("#iframe1188").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1188.focus();
editor1188.setSize(null, "250");
$("#rendering1188").hide();
$("#rendered1188").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor1188 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1188"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor1188.on("change",function(doc){
if(!binded1188){
$(window).bind('beforeunload',function(){
binded1188 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1188 = newCode;
$("textarea#stepcodeTextarea1188").val(newCode);
if(alreadyWriteCode1188!=code1188){
lastModifedTime1188 = new Date().getTime();
$("#rendering1188").show();
$("#rendered1188").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1188 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1188.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1188").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
首先通过getElementById获取元素节点，然后通过元素节点的 attributes获取其下所有的 属性节点。 因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue 如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as["id"]取出名称是id的属性
as["id"].nodeValue
注: nodeName和nodeValue表示一个节点的名称和值，详见下一步的学习 节点的属性
");
window.frames["iframe_show2958"].document.write(decodeHtml($("textarea#stepcodeTextarea2958").val()));
window.frames["iframe_show2958"].document.close();
$(window.frames["iframe_show2958"]).load(function(){
$("#iframe_show2958").height($("#iframe_show2958").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2958").height($("#iframe_show2958").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
</script>
</html>
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var as = div1.attributes;
document.write("div总共有"+as.length +" 个属性");
document.write("分别是:");
for(i = 0; i< as.length; i++){
document.write("<br>");
document.write(as[i].nodeName);
document.write(":");
document.write(as[i].nodeValue);
}
document.write("<br>");
document.write("div的id属性值是："+ as["id"].nodeValue);
</script>
</html>
");
window.frames["iframe2958"].document.write(decodeHtml(code2958));
window.frames["iframe2958"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2958"]).load(function(){
$("#iframe2958").height($("#iframe2958").contents().find("body").height()+showittryitheight);
});
$("#iframe2958").height($("#iframe2958").contents().find("body").height()+showittryitheight);
alreadyWriteCode2958 = code2958;
$("#rendering2958").hide();
$("#rendered2958").show();
}
var tRereshRetry2DemoPanel2958 = setInterval(rereshRetry2DemoPanel2958,1000);
var binded2958 = false;
$("textarea#stepcodeTextarea2958").keyup(function(){
if(!binded2958){
$(window).bind('beforeunload',function(){
binded2958 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2958 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2958!=newCode){
// window.frames["iframe2958"].document.write("
");
// window.frames["iframe2958"].document.write(decodeHtml($("textarea#stepcodeTextarea2958").val()));
// window.frames["iframe2958"].document.close();
// $(window.frames["iframe2958"]).load(function(){
// $("#iframe2958").height($("#iframe2958").contents().find("body").height()+showittryitheight);
// });
// code2958 = newCode;
// }
});
$(".tryButton2958").click(function(){
$("#tryDiv2958").show();
$("#stepcodeTextarea2958").focus();
$("#stepcodeTextarea2958").height(200);
$("#iframe2958").height(0);
window.frames["iframe2958"].document.write("
");
window.frames["iframe2958"].document.write(decodeHtml($("textarea#stepcodeTextarea2958").val()));
window.frames["iframe2958"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2958"]).load(function(){
$("#iframe2958").height($("#iframe2958").contents().find("body").height()+showittryitheight);
});
$("#iframe2958").height($("#iframe2958").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2958.focus();
editor2958.setSize(null, "250");
$("#rendering2958").hide();
$("#rendered2958").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2958 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2958"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2958.on("change",function(doc){
if(!binded2958){
$(window).bind('beforeunload',function(){
binded2958 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2958 = newCode;
$("textarea#stepcodeTextarea2958").val(newCode);
if(alreadyWriteCode2958!=code2958){
lastModifedTime2958 = new Date().getTime();
$("#rendering2958").show();
$("#rendered2958").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2958 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2958.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2958").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。 然后借助nodeName和nodeValue把内容节点的名称和值打印出来。 注: nodeName和nodeValue表示一个节点的名称和值，详见下一步的学习 节点的属性
");
window.frames["iframe_show2959"].document.write(decodeHtml($("textarea#stepcodeTextarea2959").val()));
window.frames["iframe_show2959"].document.close();
$(window.frames["iframe_show2959"]).load(function(){
$("#iframe_show2959").height($("#iframe_show2959").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2959").height($("#iframe_show2959").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
</html>
<html>
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var div1 = document.getElementById("d1");
var content = div1.childNodes[0];
document.write("div的内容节点名是:"+content.nodeName);
document.write("<br>");
document.write("div的内容节点值是:"+content.nodeValue);
</script>
</html>
");
window.frames["iframe2959"].document.write(decodeHtml(code2959));
window.frames["iframe2959"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2959"]).load(function(){
$("#iframe2959").height($("#iframe2959").contents().find("body").height()+showittryitheight);
});
$("#iframe2959").height($("#iframe2959").contents().find("body").height()+showittryitheight);
alreadyWriteCode2959 = code2959;
$("#rendering2959").hide();
$("#rendered2959").show();
}
var tRereshRetry2DemoPanel2959 = setInterval(rereshRetry2DemoPanel2959,1000);
var binded2959 = false;
$("textarea#stepcodeTextarea2959").keyup(function(){
if(!binded2959){
$(window).bind('beforeunload',function(){
binded2959 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2959 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2959!=newCode){
// window.frames["iframe2959"].document.write("
");
// window.frames["iframe2959"].document.write(decodeHtml($("textarea#stepcodeTextarea2959").val()));
// window.frames["iframe2959"].document.close();
// $(window.frames["iframe2959"]).load(function(){
// $("#iframe2959").height($("#iframe2959").contents().find("body").height()+showittryitheight);
// });
// code2959 = newCode;
// }
});
$(".tryButton2959").click(function(){
$("#tryDiv2959").show();
$("#stepcodeTextarea2959").focus();
$("#stepcodeTextarea2959").height(200);
$("#iframe2959").height(0);
window.frames["iframe2959"].document.write("
");
window.frames["iframe2959"].document.write(decodeHtml($("textarea#stepcodeTextarea2959").val()));
window.frames["iframe2959"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2959"]).load(function(){
$("#iframe2959").height($("#iframe2959").contents().find("body").height()+showittryitheight);
});
$("#iframe2959").height($("#iframe2959").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2959.focus();
editor2959.setSize(null, "250");
$("#rendering2959").hide();
$("#rendered2959").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor2959 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2959"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor2959.on("change",function(doc){
if(!binded2959){
$(window).bind('beforeunload',function(){
binded2959 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2959 = newCode;
$("textarea#stepcodeTextarea2959").val(newCode);
if(alreadyWriteCode2959!=code2959){
lastModifedTime2959 = new Date().getTime();
$("#rendering2959").show();
$("#rendered2959").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2959 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2959.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2959").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
