HTML DOM 获取元素节点 | 基于实例代码分步讲解一站式学习Java

工具版本兼容问题

关键字	简介	示例代码
nodeName	节点名称	示例代码
nodeValue	节点值	示例代码
nodeType	节点类型	示例代码
innerHTML	元素的文本内容	示例代码
id value className	元素上的属性	示例代码
	练习-验证账号是否已经存在	示例代码
	答案-验证账号是否已经存在	示例代码
	练习-切换不同的图片	示例代码
	答案-切换不同的图片	示例代码
	练习-判断输入框里的值，是否是整数(浮点数也不行)	示例代码
	答案-判断输入框里的值，是否是整数(浮点数也不行)	示例代码

示例 1 : 节点名称
示例 2 : 节点值
示例 3 : 节点类型
示例 4 : 元素的文本内容
示例 5 : 元素上的属性
示例 6 : 练习-验证账号是否已经存在
示例 7 : 答案-验证账号是否已经存在
示例 8 : 练习-切换不同的图片
示例 9 : 答案-切换不同的图片
示例 10 : 练习-判断输入框里的值，是否是整数(浮点数也不行)
示例 11 : 答案-判断输入框里的值，是否是整数(浮点数也不行)

示例 1 :

节点名称

顶折

nodeName表示一个节点的名字
如本例：
document.nodeName 文档的节点名，是固定的#document
div1.nodeName 元素的节点名，是对应的标签名 div
div1.attributes[0].nodeName 属性的节点名，是对应的属性名 id
div1.childNodes[0].nodeName 内容的节点名，是固定的 #text

运行效果

<html>
 
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的节点名称:"+document.nodeName);
p("div元素节点的节点名称:"+div1.nodeName);
p("div下属性节点的节点名称:"+div1.attributes[0].nodeName);
p("div下内容节点的节点名称:"+div1.childNodes[0].nodeName);
</script>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

节点值

顶折

nodeValue表示一个节点的值
如本例：
document.nodeValue 文档的节点值，是 null
div1.nodeValue 元素的节点值，是null
div1.attributes[0].nodeValue 属性的节点值，是对应的属性值 d1
div1.childNodes[0].nodeValue 内容的节点值，是内容即： #text

运行效果

<html>
  
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document是没有nodeValue的："+document.nodeValue);
p("元素节点是没有nodeValue的："+div1.nodeValue);
p("属性节点id的nodeValue："+div1.attributes[0].nodeValue);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
</script>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

节点类型

顶折

nodeType表示一个节点的类型
不同的节点类型，对应的节点类型值是不一样的
如本例：
document.nodeType 文档的节点类型，是 9
div1.nodeType 元素的节点类型，是 1
div1.attributes[0].nodeType 属性的节点类型，是 2
div1.childNodes[0].nodeType 内容的节点类型，是 3

运行效果

<html>
   
<div id="d1">hello HTML DOM</div>
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
</script>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

元素的文本内容

顶折

修改与获取内容的值可以通过 childNodes[0].nodeValue进行
还有个简便办法就是通过innerHTML进行。效果是一样的。

运行效果

<html>
   
<div id="d1">hello HTML DOM</div>
<script>

function changeDiv1(){
  document.getElementById("d1").childNodes[0].nodeValue= "通过childNode[0].value改变内容";
}
function changeDiv2(){
  document.getElementById("d1").innerHTML= "通过innerHTML改变内容";
}
</script>

<button onclick="changeDiv1()">通过内容节点方式改变div的内容</button>
<button onclick="changeDiv2()">通过innerHTML改变div的内容</button>

</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

元素上的属性

顶折

元素上的属性，比如id,value 可以通过 . 直接访问
如果是自定义属性，那么可以通过如下两种方式来获取

getAttribute("test")
attributes["test"].nodeValue

注: class需要通过className获取

运行效果

代码行数较多，请点击查看

<html>
   
<div id="d1">hello HTML DOM</div>

<script>

function get(){

  var input1 = document.getElementById("input1");
  var s = "id="+input1.id + "<br>";
  s += "value="+input1.value + "<br>";
  s += "class="+input1.className + "<br>";
  s += "test="+input1.getAttribute("test")+ "<br>";
  s += "test="+input1.attributes["test"].nodeValue+ "<br>";

  document.getElementById("d1").innerHTML= s;
}
</script>

<input id="input1" class="class1 class2" test="t1" value="这是一个输入框">
<br>
<button onclick="get()">获取input的属性</button>

<div style="height:30px"></div>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 6 :

练习-验证账号是否已经存在

顶折

姿势不对,事倍功半! 点击查看做练习的正确姿势

因为截至目前的学习进度，还没有学习服务端的内容，那么就在js使用简单的验证规则：如果账号是以a或者A开头的，那么就提示已经存在了。

代码行数较多，请点击查看

<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
   var firstChar = name.charAt(0);
   if('a'==firstChar || 'A'==firstChar)
    noMessage.style.display="inline";
   else
    yesMessage.style.display="inline";
  }
}
</script>
 
<input id="name">
 
<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 7 :

答案-验证账号是否已经存在

顶折

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

运行效果

代码行数较多，请点击查看

<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
   var firstChar = name.charAt(0);
   if('a'==firstChar || 'A'==firstChar)
    noMessage.style.display="inline";
   else
    yesMessage.style.display="inline";
  }
}
</script>

<input id="name">

<input type="button" value="验证" onclick="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 8 :

练习-切换不同的图片

顶折

姿势不对,事倍功半! 点击查看做练习的正确姿势

<script>
function switch1(){
var img = document.getElementById("img");
img.src = "http://how2j.cn/study/gareen.jpg";
}
function switch2(){
var img = document.getElementById("img");
img.attributes["src"].nodeValue="http://how2j.cn/study/katarina.jpg";
}
</script>
<button onclick="switch1()">通过src属性切换图片1</button> <br>
<button onclick="switch2()">通过属性节点切换图片2</button> <br>
<img id="img" width="100" src="http://how2j.cn/study/katarina.jpg"/>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 9 :

答案-切换不同的图片

顶折

在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多

运行效果

<script>
function switch1(){
var img = document.getElementById("img");
img.src = "http://how2j.cn/study/gareen.jpg";
}
function switch2(){
var img = document.getElementById("img");
img.attributes["src"].nodeValue="http://how2j.cn/study/katarina.jpg";
}
</script>
<button onclick="switch1()">通过src属性切换图片1</button> <br>
<button onclick="switch2()">通过属性节点切换图片2</button> <br>
<img id="img" width="100" src="http://how2j.cn/study/katarina.jpg"/>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 10 :

练习-判断输入框里的值，是否是整数(浮点数也不行)

顶折

姿势不对,事倍功半! 点击查看做练习的正确姿势

示例 11 :

答案-判断输入框里的值，是否是整数(浮点数也不行)

顶折

获取节点

样式

HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。

问答区域

2018-11-21 示例10

加油鸭

关于前端部分-HTML DOM-节点的属性的提问

判断3.0不是整数，有种思路，就是判断小数点后是否都为零，若是则为整数则可以避免，但编起来不知道怎么样

<script>
function judge(){
var num=document.getElementById("in").value;
if(parseInt(num)==num){
document.getElementById("out").innerHTML="是整数";}
else{
document.getElementById("out").innerHTML="不是整数";}
}
</script>
<br>
<input type="text" value="3.1415926" id="in"><br>
<button  onclick="judge()">判断</button><br>
<span id="out"></span>

2018-11-21 作业6

加油鸭

关于前端部分-HTML DOM-节点的属性的提问

这个我放在后面了，为什么没有出现NULL

<script>
function example6(){
var word=document.getElementById("word").value;
if(word[1]=="a"||word[1]=="A"){
document.getElementById("out").innerHTML="该用户名已经被注册";
document.getElementById("out").style.color="red";
}
else{document.getElementById("out").innerHTML="该用户名可注册";
}
}
</script>
</br>
<input type="text" id="word"><button  style="margin-left:20;margin-right:20;"  onclick="example6()">验证</button>
<span id="out"  style="font-color:red"></sapn>

1 个答案

加油鸭答案时间：2018-11-21

似乎是因为document.write()当时就要用，而document.getElementById()不是当时就要用

2018-11-21 6的作业

2018-08-24 答案：练习-判断输入框里的值，是否是整数(浮点数也不行)

HonoSV

关于前端部分-HTML DOM-节点的属性的提问

见代码

<input type="text" id="num"/>
		<button onclick="check()">check</button>
		<span style="color: green;display: none;" id="isIn">is Integer</span>
		<span style="color: red;display: none;" id="isNotIn">is not Integer</span>
		
		<script>
			function check(){
				var a = document.getElementById("num").value;
				var isIn = document.getElementById("isIn");
				var isNotIn = document.getElementById("isNotIn");
				isIn.style.display="none";
				isNotIn.style.display="none";
				
				if (0!=a.length){
					if(!isNaN(Number(a))==true){
						var b = a.split('.');
						if(b.length==1)
							isIn.style.display="inline";
						else
							isNotIn.style.display="inline";
					} else {
						isNotIn.style.display="inline";
					}
					
				}
			}
		</script>

2 个答案

HonoSV 答案时间：2018-10-09

楼下那位朋友，我很期待你贴出你的代码

我会努力学JAVA的答案时间：2018-10-05

如果是科学计数法呢，比如3.13e2，这是一个证书吧。但你这么分隔，不就不对了

2018-08-09 交作业

神乐

关于前端部分-HTML DOM-节点的属性的提问

很简单的几个作业...

//示例六
<input type="text" id="t1" /><input type="button" value="验证" onclick="get();" />
<div id="d1" style="color:#F00; display:none"></div>

<script>
	function get(){
		var s=document.getElementById("t1").value;
		if(s[0]=="a"||s[0]=="A"){
			document.getElementById("d1").innerHTML="账号已经被占用";
			document.getElementById("d1").style.color="#F00";
			document.getElementById("d1").style.display="inline";
		}else{
			document.getElementById("d1").innerHTML="账号可以使用";
			document.getElementById("d1").style.color="#0F0";
			document.getElementById("d1").style.display="inline";
			}
		}
</script>
//示例八
<input type="button" value="通过src属性切换图片1" id="b1" onclick="gets();"/>
<br />
<input type="button" value="通过属性节点切换图片2" id="b2" onclick="gett();"/>
<br />
<img id="photo" src="images/4.png" />
<script>
	function gets(){
		document.getElementById("photo").src="images/6.png";
	}
	function gett(){
		var sb=document.getElementById("photo").attributes;
		sb["src"].nodeValue="images/4.png"
	}	
</script>

//示例十
<input type="text" id="t1" /><input type="button" value="判断是否整数" onclick="get();" />
<div id="d1" style="color:#FFF;display:none;"></div>
<script>
	function get(){
		var types=document.getElementById("t1").value;
		var num=new Number(types);
		if(isNaN(num)){
			document.getElementById("d1").style.color="#F00";
			document.getElementById("d1").style.display="inline";
			document.getElementById("d1").innerHTML="输入框中的不是一个数字";
			return;
		}
		var value=Math.round(num);
		if(value!=num){
			document.getElementById("d1").style.color="#F00";
			document.getElementById("d1").style.display="inline";
			document.getElementById("d1").innerHTML="输入的是一个浮点数,不是整数";
		}else{
			document.getElementById("d1").style.color="#0F0";
			document.getElementById("d1").style.display="inline";
			document.getElementById("d1").innerHTML="输入的是一个整数";
		}
	}
</script>

1 个答案

神乐答案时间：2018-08-09

想了一下，示例十还是不能完全判断浮点数.如果输入5.0还是会认为是一个整数。多加一点代码就可以，new一个String对象，判断输入是不是有小数点就可以了。

2018-08-07 看不见第十题。。。。。

2018-07-31 示例六有关获取属性值的问题

2018-07-26 你们示例10做的太繁琐了

JGD

关于前端部分-HTML DOM-节点的属性的提问

只需先判断是否数字，再判断与整形是否相同

<html>

<head>
	<title></title>
	<meta http-equiv="content-language" content="text/html;charset=utf-8;" />
	<script type="text/javascript">
		function yanzheng(){
			var enter=document.getElementById("num").value;
			var isNum;
			var result=document.getElementById("yzResult");
			if(isNaN(Number(enter))){
				isNum=false;
			}else if(parseInt(enter)!=enter){
				isNum=false;
			}else{
				isNum=true;
			}
			if(isNum==true){
				result.innerHTML="是整数";
			}else{
				result.innerHTML="非整数";
			}
		}
	</script>
</head>
<body>
		<input type="text" id="num" />
		<button onclick="yanzheng()">验证输入的是否是数字</button>
		<span id="yzResult">ad</span>
</body>
</html>

2 个答案

eupho 答案时间：2018-10-25

你这个会把1.0识别成整数，把1e1识别成非整数

淅淅细雨答案时间：2018-10-25

parseInt(enter)!=enter，一个是字符串，一个是数字，可以比较？

2018-07-05 这段代码是什么意思呢

2018-06-01 实例代码里边的P是什么意思？

2018-05-20 第十被NaN坑了好久，后来才发现可以用isNan()函数判断

2018-04-07 当一个div里面有两个或者多个span这样的子元素的时候,div.childNodes[0].nodeValue;这句没有取到值

阿米妮

关于前端部分-HTML DOM-节点的属性的提问

当一个div里面有两个或者多个span这样的子元素的时候,div.childNodes[0].nodeValue;这句没有取到值

<html>
   
<div id="d1">hello HTML DOM</div>
<div id="d2">
  <span>hello HTML DOM1</span>
  <span>hello HTML DOM2</span>
  </div>  
<script>
function p(s){
    document.write(s);
    document.write("<br>");
}
var  div1 = document.getElementById("d1");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div1.nodeType);
p("属性节点的nodeType是："+div1.attributes[0].nodeType);
p("内容节点的nodeType是："+div1.childNodes[0].nodeType);
 var  div2 = document.getElementById("d2");
p("document的nodeType是："+document.nodeType);
p("元素节点的nodeType是："+div2.nodeType);
p("属性节点的nodeType是："+div2.attributes[0].nodeType);
p("内容节点的nodeType是："+div2.childNodes[0].nodeType);
p("内容节点的nodeValue："+div1.childNodes[0].nodeValue);
p("内容节点的nodeValue："+div2.childNodes[0].nodeValue);   //这个是没有值的
</script>
</html>

2 个答案

civ 答案时间：2018-05-03

div.childNodes[0]获得的是第一个内容节点，是直接写在div上的。哪怕是空。要获得span就是div.childNodes[1]，然后要获得第一个span的内容就是div内容节点的内容节点div.childNodes[1].childNodes[0].nodeValue

花少答案时间：2018-04-10

span是元素，div.childNodes[0].nodeValue这句代码意思是获取节点内容，你应该先获取span元素的节点

var s=document.getElementsByTagName("span");
for(var i=0;i<s.length;i++){
	document.write("ssss:"+s[i].childNodes[0].nodeValue+"<br>");
}

2018-03-27 关于示例5

2018-03-24 示例6答案，总觉得好蠢的代码

2018-02-27 作业

2018-02-05 第十题滴作业

2018-01-24 为什么前边的计算器和江南皮革厂可以用value直接赋值，本章节要用nodevalue呢？

2018-01-12 实例10。。提交作业

2017-12-25 示例8问题

2017-12-25 例6答案，看看有没有问题

2017-10-02 第十题没有答案，那我贴一个老师不介意吧

parton

关于前端部分-HTML DOM-节点的属性 -答案-判断输入框里的值，是否是整数(浮点数也不行) 的提问

第十题自己的办法，如果有什么不足之处还请大家不吝指点。思路就是判断输入的数值里面是否含有 . 这个符号。例如：13.0 13.4 15.6 这些都是float 130 12 23 41 都是int 至于站长说的parseFloat我不知道怎么用，直接用也没得到正确结果。 13.4 与 parseFloat(13.4)的结果还是一样的。

<html>
  <script>
    function check(){
      var f1 = document.getElementById("value").value;
      var isFloat=false;
      for (i=0;i<f1.length;i++){
        if(f1.charAt(i)=='.')
          isFloat=true;
      }
      if (isFloat)
        alert("float");
      else
        alert("int");
    }
  </script>
   <input id="value">
  <button onclick="check()">验算</button>
</html>

3 个答案

parton 答案时间：2017-11-21

上面的大兄弟，那你13.0这个是整数么？我感觉还应该是float，但是用你的判断就是int。用indexOf确实可以

xen 答案时间：2017-11-16

直接用indexOf就可以，不用自己遍历，或者直接用parseInt比较

代码超过 5行，点击查看

how2j 答案时间：2017-10-02

非常好，哈哈

2017-09-28 +=

2017-08-13 是不是nodeValue 不能及时更新啊

2017-06-18 第十题怎么判断是不是浮点数

slience

关于前端部分-HTML DOM-节点的属性 -练习-判断输入框里的值，是否是整数(浮点数也不行) 的提问

第十题怎么判断是不是浮点数，给个提示行吗

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">
    <script>
        function check() {
            var number = document.getElementById("number").value;
            var result = document.getElementsByTagName("span")[0];
            if (isNaN(Number(number))) {
                result.innerHTML = "不是整数";
                result.style.color = "red";
            } else {
                result.innerHTML = "是整数";
                result.style.color = "green";
            }
        }
    </script>
</head>

<body>
    <input type="text" name="" id="number">
    <input type="button" value="验证" onclick="check()">
    <span></span>
</body>

</html>

1 个答案

how2j 答案时间：2017-06-19

用parseFloat，看之前和之后是否一样

2017-04-20 示例10 答案，这样写可以吗？希望老师给些指导

2017-04-19 示例11的问题

我love自学

关于前端部分-HTML DOM-节点的属性的提问

代码是自己编的，请问我用这种方法来判断整数行吗？还有函数里 if(Math.floor(getvalue)==getvalue) 正常来说不是应该 Math.floor()之后的数据类型要和原来全等才是对的吗？为什么我用 === 编就会失败，要用 == 才成功？谢谢

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
	<input type="text" id="inp" value="">
	<input type="button" id="but" value="判断" onclick="fun()">
	<span id="sp"></span>
<script type="text/javascript">
	function fun(){
		var getvalue=document.getElementById('inp').value;		
		if(Math.floor(getvalue)==getvalue){
			document.getElementById('sp').innerHTML="该数是整数";
		}else{
			document.getElementById('sp').innerHTML="该数不是整数";
		}
	}
</script>
</body>
</html>

4 个答案

Lin88_yang 答案时间：2018-04-03

百度的正则表达式

代码超过 5行，点击查看

liuh 答案时间：2017-11-27

这个可以用正则表达式吧

^[0-9]*$

爱刷屏的萝卜头答案时间：2017-06-12

站长，直接parseInt（value）==value比较不出1.0这种吧，1.0不算浮点数？我是用split(.),判断获取的数组长度是否为1来判断是不是整数的

how2j 答案时间：2017-04-20

1. 可以吧，我一般用parseInt 2. Math.floor() 返回类型是number, getvalue这个变量的类型是string,所以 === 会失败

2017-03-17 示例5最后面为什么要特意加一个<div style="height:30px"></div>

2017-02-15 示例8代码问题

Ivan

关于前端部分-HTML DOM-节点的属性的提问

老大属性节点方法是可以来回切换但是用属性只能单向切换吗（从盖伦切换到卡特琳娜）这是怎么回事？

<body>
  <button onclick="src()">src</button><br/>
  <button onclick="att()">attributes</button><br/>
  <img  id="i1" src="katarina.jpg">
<script>
    function src() {
        var sAttribute=document.getElementById("i1");
        if(sAttribute.src=="katarina.jpg")
            sAttribute.src="gareen.jpg";
        else
            sAttribute.src="katarina.jpg";
    }
    function att() {
        var aAttribute=document.getElementById("i1");
        if(aAttribute.attributes[1].value=="katarina.jpg")
        aAttribute.attributes[1].value="gareen.jpg";
        else
            aAttribute.attributes[1].value="katarina.jpg";
    }
</script>
</body>

2 个答案

how2j 答案时间：2017-02-16

追加答案 http://how2j.cn/code/38

how2j 答案时间：2017-02-16

已在QQ解答，另外我给你加了一行调试代码，你用火狐的调试模式看看输出就明白了。

代码超过 5行，点击查看

2017-02-04 示例 10 没有答案，这样的代码是否可以

提问之前请登陆

关于前端部分-HTML DOM-节点的属性的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 902680467

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图