关键字
简介
示例代码
节点关系图
示例代码
parentNode
父节点关系
示例代码
previousSibling
同胞节点关系
示例代码
childNodes
子节点关系
示例代码
childNodes
childNodes和children的区别
示例代码
示例
1
:
节点关系图
示例
2
:
父节点关系
示例
3
:
同胞节点关系
示例
4
:
子节点关系
示例
5
:
childNodes和children的区别
假设html代码如实例中，那么各个元素节点的关系如下:parentNode 是parentDivfirstNode 是 d1lastNode 是d3previousSibling 是d1nextSibling 是d3children 是 d1 d2 d3
");
window.frames["iframe_show1186"].document.write(decodeHtml($("textarea#stepcodeTextarea1186").val()));
window.frames["iframe_show1186"].document.close();
$(window.frames["iframe_show1186"]).load(function(){
$("#iframe_show1186").height($("#iframe_show1186").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1186").height($("#iframe_show1186").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
");
window.frames["iframe1186"].document.write(decodeHtml(code1186));
window.frames["iframe1186"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1186"]).load(function(){
$("#iframe1186").height($("#iframe1186").contents().find("body").height()+showittryitheight);
});
$("#iframe1186").height($("#iframe1186").contents().find("body").height()+showittryitheight);
alreadyWriteCode1186 = code1186;
$("#rendering1186").hide();
$("#rendered1186").show();
}
var tRereshRetry2DemoPanel1186 = setInterval(rereshRetry2DemoPanel1186,1000);
var binded1186 = false;
$("textarea#stepcodeTextarea1186").keyup(function(){
if(!binded1186){
$(window).bind('beforeunload',function(){
binded1186 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1186 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1186!=newCode){
// window.frames["iframe1186"].document.write("
");
// window.frames["iframe1186"].document.write(decodeHtml($("textarea#stepcodeTextarea1186").val()));
// window.frames["iframe1186"].document.close();
// $(window.frames["iframe1186"]).load(function(){
// $("#iframe1186").height($("#iframe1186").contents().find("body").height()+showittryitheight);
// });
// code1186 = newCode;
// }
});
$(".tryButton1186").click(function(){
$("#tryDiv1186").show();
$("#stepcodeTextarea1186").focus();
$("#stepcodeTextarea1186").height(200);
$("#iframe1186").height(0);
window.frames["iframe1186"].document.write("
");
window.frames["iframe1186"].document.write(decodeHtml($("textarea#stepcodeTextarea1186").val()));
window.frames["iframe1186"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1186"]).load(function(){
$("#iframe1186").height($("#iframe1186").contents().find("body").height()+showittryitheight);
});
$("#iframe1186").height($("#iframe1186").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1186.focus();
editor1186.setSize(null, "250");
$("#rendering1186").hide();
$("#rendered1186").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 editor1186 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1186"), {
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);
}
}
});
editor1186.on("change",function(doc){
if(!binded1186){
$(window).bind('beforeunload',function(){
binded1186 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1186 = newCode;
$("textarea#stepcodeTextarea1186").val(newCode);
if(alreadyWriteCode1186!=code1186){
lastModifedTime1186 = new Date().getTime();
$("#rendering1186").show();
$("#rendered1186").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1186 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1186.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1186").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
通过parentNode获取父节点。
");
window.frames["iframe_show1183"].document.write(decodeHtml($("textarea#stepcodeTextarea1183").val()));
window.frames["iframe_show1183"].document.close();
$(window.frames["iframe_show1183"]).load(function(){
$("#iframe_show1183").height($("#iframe_show1183").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1183").height($("#iframe_show1183").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<html>
<body>
<script>
var node = null;
function showParent(){
if(null==node)
node = document.getElementById("d1");
if(document == node)
alert("已是根节点:document");
else{
alert(node.parentNode);
node = node.parentNode;
}
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showParent()">不断递归d1的父节点</button>
</body>
</html>
<html>
<body>
<script>
var node = null;
function showParent(){
if(null==node)
node = document.getElementById("d1");
if(document == node)
alert("已是根节点:document");
else{
alert(node.parentNode);
node = node.parentNode;
}
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showParent()">不断递归d1的父节点</button>
</body>
</html>
");
window.frames["iframe1183"].document.write(decodeHtml(code1183));
window.frames["iframe1183"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1183"]).load(function(){
$("#iframe1183").height($("#iframe1183").contents().find("body").height()+showittryitheight);
});
$("#iframe1183").height($("#iframe1183").contents().find("body").height()+showittryitheight);
alreadyWriteCode1183 = code1183;
$("#rendering1183").hide();
$("#rendered1183").show();
}
var tRereshRetry2DemoPanel1183 = setInterval(rereshRetry2DemoPanel1183,1000);
var binded1183 = false;
$("textarea#stepcodeTextarea1183").keyup(function(){
if(!binded1183){
$(window).bind('beforeunload',function(){
binded1183 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1183 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1183!=newCode){
// window.frames["iframe1183"].document.write("
");
// window.frames["iframe1183"].document.write(decodeHtml($("textarea#stepcodeTextarea1183").val()));
// window.frames["iframe1183"].document.close();
// $(window.frames["iframe1183"]).load(function(){
// $("#iframe1183").height($("#iframe1183").contents().find("body").height()+showittryitheight);
// });
// code1183 = newCode;
// }
});
$(".tryButton1183").click(function(){
$("#tryDiv1183").show();
$("#stepcodeTextarea1183").focus();
$("#stepcodeTextarea1183").height(200);
$("#iframe1183").height(0);
window.frames["iframe1183"].document.write("
");
window.frames["iframe1183"].document.write(decodeHtml($("textarea#stepcodeTextarea1183").val()));
window.frames["iframe1183"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1183"]).load(function(){
$("#iframe1183").height($("#iframe1183").contents().find("body").height()+showittryitheight);
});
$("#iframe1183").height($("#iframe1183").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1183.focus();
editor1183.setSize(null, "250");
$("#rendering1183").hide();
$("#rendered1183").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 editor1183 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1183"), {
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);
}
}
});
editor1183.on("change",function(doc){
if(!binded1183){
$(window).bind('beforeunload',function(){
binded1183 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1183 = newCode;
$("textarea#stepcodeTextarea1183").val(newCode);
if(alreadyWriteCode1183!=code1183){
lastModifedTime1183 = new Date().getTime();
$("#rendering1183").show();
$("#rendered1183").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1183 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1183.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1183").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
分别通过 previousSibling 和nextSibling 属性获取前一个，以及后一个同胞节点。注意 d1和d2标签是紧挨着 的，所以d2前一个节点是d1。注意 d2和d3不是紧挨着 标签之间有任何字符、空白、换行 都会产生文本元素。 所以获取到的节点是#text.
");
window.frames["iframe_show1184"].document.write(decodeHtml($("textarea#stepcodeTextarea1184").val()));
window.frames["iframe_show1184"].document.close();
$(window.frames["iframe_show1184"]).load(function(){
$("#iframe_show1184").height($("#iframe_show1184").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1184").height($("#iframe_show1184").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<script>
function showPre(){
var d2 = document.getElementById("d2");
alert(d2.previousSibling.innerHTML);
}
function showNext(){
var d2 = document.getElementById("d2");
alert(d2.nextSibling.nodeName);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div><div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showPre()">获取d2的前一个同胞</button>
<button onclick="showNext()">获取d2的后一个同胞</button>
<script>
function showPre(){
var d2 = document.getElementById("d2");
alert(d2.previousSibling.innerHTML);
}
function showNext(){
var d2 = document.getElementById("d2");
alert(d2.nextSibling.nodeName);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div><div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showPre()">获取d2的前一个同胞</button>
<button onclick="showNext()">获取d2的后一个同胞</button>
");
window.frames["iframe1184"].document.write(decodeHtml(code1184));
window.frames["iframe1184"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1184"]).load(function(){
$("#iframe1184").height($("#iframe1184").contents().find("body").height()+showittryitheight);
});
$("#iframe1184").height($("#iframe1184").contents().find("body").height()+showittryitheight);
alreadyWriteCode1184 = code1184;
$("#rendering1184").hide();
$("#rendered1184").show();
}
var tRereshRetry2DemoPanel1184 = setInterval(rereshRetry2DemoPanel1184,1000);
var binded1184 = false;
$("textarea#stepcodeTextarea1184").keyup(function(){
if(!binded1184){
$(window).bind('beforeunload',function(){
binded1184 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1184 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1184!=newCode){
// window.frames["iframe1184"].document.write("
");
// window.frames["iframe1184"].document.write(decodeHtml($("textarea#stepcodeTextarea1184").val()));
// window.frames["iframe1184"].document.close();
// $(window.frames["iframe1184"]).load(function(){
// $("#iframe1184").height($("#iframe1184").contents().find("body").height()+showittryitheight);
// });
// code1184 = newCode;
// }
});
$(".tryButton1184").click(function(){
$("#tryDiv1184").show();
$("#stepcodeTextarea1184").focus();
$("#stepcodeTextarea1184").height(200);
$("#iframe1184").height(0);
window.frames["iframe1184"].document.write("
");
window.frames["iframe1184"].document.write(decodeHtml($("textarea#stepcodeTextarea1184").val()));
window.frames["iframe1184"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1184"]).load(function(){
$("#iframe1184").height($("#iframe1184").contents().find("body").height()+showittryitheight);
});
$("#iframe1184").height($("#iframe1184").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1184.focus();
editor1184.setSize(null, "250");
$("#rendering1184").hide();
$("#rendered1184").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 editor1184 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1184"), {
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);
}
}
});
editor1184.on("change",function(doc){
if(!binded1184){
$(window).bind('beforeunload',function(){
binded1184 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1184 = newCode;
$("textarea#stepcodeTextarea1184").val(newCode);
if(alreadyWriteCode1184!=code1184){
lastModifedTime1184 = new Date().getTime();
$("#rendering1184").show();
$("#rendered1184").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1184 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1184.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1184").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
子节点关系有:
注: firstChild 如果父节点的开始标签和第一个元素的开始标签之间有文本、空格、换行 ，那么firstChild第一个子节点将会是文本节点 ，不会是第一个元素节点
注: lastChild 和firstChild同理。 在本例中故意让第3个元素的结束标签与div的结束标签紧挨着 ，所以最后一个子节点就是第三个标签
注: 子元素个数一共是6个。 因为parentDiv的子节点是 文本节点接着一个元素节点 ，重复3次。 所以一共是6个。
");
window.frames["iframe_show1182"].document.write(decodeHtml($("textarea#stepcodeTextarea1182").val()));
window.frames["iframe_show1182"].document.close();
$(window.frames["iframe_show1182"]).load(function(){
$("#iframe_show1182").height($("#iframe_show1182").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1182").height($("#iframe_show1182").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<script>
function showfirst(){
var div = document.getElementById("parentDiv");
alert(div.firstChild.nodeName);
}
function showlast(){
var div = document.getElementById("parentDiv");
alert(div.lastChild.nodeName);
}
function showall(){
var div = document.getElementById("parentDiv");
alert(div.childNodes.length);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showfirst()">第一个子节点</button>
<button onclick="showlast()">最后一个子节点</button>
<button onclick="showall()">所有子节点数量</button>
<script>
function showfirst(){
var div = document.getElementById("parentDiv");
alert(div.firstChild.nodeName);
}
function showlast(){
var div = document.getElementById("parentDiv");
alert(div.lastChild.nodeName);
}
function showall(){
var div = document.getElementById("parentDiv");
alert(div.childNodes.length);
}
</script>
<div id="parentDiv">
父Div的内容
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showfirst()">第一个子节点</button>
<button onclick="showlast()">最后一个子节点</button>
<button onclick="showall()">所有子节点数量</button>
");
window.frames["iframe1182"].document.write(decodeHtml(code1182));
window.frames["iframe1182"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1182"]).load(function(){
$("#iframe1182").height($("#iframe1182").contents().find("body").height()+showittryitheight);
});
$("#iframe1182").height($("#iframe1182").contents().find("body").height()+showittryitheight);
alreadyWriteCode1182 = code1182;
$("#rendering1182").hide();
$("#rendered1182").show();
}
var tRereshRetry2DemoPanel1182 = setInterval(rereshRetry2DemoPanel1182,1000);
var binded1182 = false;
$("textarea#stepcodeTextarea1182").keyup(function(){
if(!binded1182){
$(window).bind('beforeunload',function(){
binded1182 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1182 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1182!=newCode){
// window.frames["iframe1182"].document.write("
");
// window.frames["iframe1182"].document.write(decodeHtml($("textarea#stepcodeTextarea1182").val()));
// window.frames["iframe1182"].document.close();
// $(window.frames["iframe1182"]).load(function(){
// $("#iframe1182").height($("#iframe1182").contents().find("body").height()+showittryitheight);
// });
// code1182 = newCode;
// }
});
$(".tryButton1182").click(function(){
$("#tryDiv1182").show();
$("#stepcodeTextarea1182").focus();
$("#stepcodeTextarea1182").height(200);
$("#iframe1182").height(0);
window.frames["iframe1182"].document.write("
");
window.frames["iframe1182"].document.write(decodeHtml($("textarea#stepcodeTextarea1182").val()));
window.frames["iframe1182"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1182"]).load(function(){
$("#iframe1182").height($("#iframe1182").contents().find("body").height()+showittryitheight);
});
$("#iframe1182").height($("#iframe1182").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1182.focus();
editor1182.setSize(null, "250");
$("#rendering1182").hide();
$("#rendered1182").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 editor1182 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1182"), {
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);
}
}
});
editor1182.on("change",function(doc){
if(!binded1182){
$(window).bind('beforeunload',function(){
binded1182 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1182 = newCode;
$("textarea#stepcodeTextarea1182").val(newCode);
if(alreadyWriteCode1182!=code1182){
lastModifedTime1182 = new Date().getTime();
$("#rendering1182").show();
$("#rendered1182").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1182 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1182.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1182").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
示例
5
:
childNodes和children的区别
顶
折
childNodes 和children 都可以获取一个元素节点的子节点。
包含 文本节点
排除 文本节点
");
window.frames["iframe_show1185"].document.write(decodeHtml($("textarea#stepcodeTextarea1185").val()));
window.frames["iframe_show1185"].document.close();
$(window.frames["iframe_show1185"]).load(function(){
$("#iframe_show1185").height($("#iframe_show1185").contents().find("body").height()+showittryitheight);
});
$("#iframe_show1185").height($("#iframe_show1185").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
运行效果
代码比较
复制代码
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showNumber1()">通过childNodes获取子节点总数</button>
<button onclick="showNumber2()">通过children()获取子节点总数</button>
<script>
function showNumber1(){
alert(document.getElementById("parentDiv").childNodes.length);
}
function showNumber2(){
alert(document.getElementById("parentDiv").children.length);
}
</script>
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div></div>
<button onclick="showNumber1()">通过childNodes获取子节点总数</button>
<button onclick="showNumber2()">通过children()获取子节点总数</button>
<script>
function showNumber1(){
alert(document.getElementById("parentDiv").childNodes.length);
}
function showNumber2(){
alert(document.getElementById("parentDiv").children.length);
}
</script>
");
window.frames["iframe1185"].document.write(decodeHtml(code1185));
window.frames["iframe1185"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1185"]).load(function(){
$("#iframe1185").height($("#iframe1185").contents().find("body").height()+showittryitheight);
});
$("#iframe1185").height($("#iframe1185").contents().find("body").height()+showittryitheight);
alreadyWriteCode1185 = code1185;
$("#rendering1185").hide();
$("#rendered1185").show();
}
var tRereshRetry2DemoPanel1185 = setInterval(rereshRetry2DemoPanel1185,1000);
var binded1185 = false;
$("textarea#stepcodeTextarea1185").keyup(function(){
if(!binded1185){
$(window).bind('beforeunload',function(){
binded1185 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code1185 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code1185!=newCode){
// window.frames["iframe1185"].document.write("
");
// window.frames["iframe1185"].document.write(decodeHtml($("textarea#stepcodeTextarea1185").val()));
// window.frames["iframe1185"].document.close();
// $(window.frames["iframe1185"]).load(function(){
// $("#iframe1185").height($("#iframe1185").contents().find("body").height()+showittryitheight);
// });
// code1185 = newCode;
// }
});
$(".tryButton1185").click(function(){
$("#tryDiv1185").show();
$("#stepcodeTextarea1185").focus();
$("#stepcodeTextarea1185").height(200);
$("#iframe1185").height(0);
window.frames["iframe1185"].document.write("
");
window.frames["iframe1185"].document.write(decodeHtml($("textarea#stepcodeTextarea1185").val()));
window.frames["iframe1185"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe1185"]).load(function(){
$("#iframe1185").height($("#iframe1185").contents().find("body").height()+showittryitheight);
});
$("#iframe1185").height($("#iframe1185").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor1185.focus();
editor1185.setSize(null, "250");
$("#rendering1185").hide();
$("#rendered1185").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 editor1185 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1185"), {
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);
}
}
});
editor1185.on("change",function(doc){
if(!binded1185){
$(window).bind('beforeunload',function(){
binded1185 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code1185 = newCode;
$("textarea#stepcodeTextarea1185").val(newCode);
if(alreadyWriteCode1185!=code1185){
lastModifedTime1185 = new Date().getTime();
$("#rendering1185").show();
$("#rendered1185").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor1185 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor1185.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv1185").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
试一下
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
渲染中
渲染完成
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
