<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 定义一个函数，专门为指定元素绑定单击响应的函数
* 参数：
* idstr 要绑定单击响应函数的对象的id属性
* fun 事件的回调函数当单击元素时，该函数会被触发
*/
function myclick (idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick = fun;
}
window.onload=function(){
myclick("btn07",function(){
//获取id为北京的节点
var bj=document.getElementById('bj');
//返回#bj的父节点 一说父 就是元素
var pn = bj.parentNode;
// alert(pn.innerHTML);
/*
* innerText该属性获取到元素内部的文本内容
* 和innerHTML类似，不同的是 它会自动将html去掉
*/
alert(pn.innerText);
});
myclick("btn08",function(){
var and=document.getElementById('andi');
//返回#andi的前一个兄弟节点 （可能获取到空白文本）
var ps = and.previousSibling;
//获取前一个兄弟元素，不包括空白
var pe=and.previousElementSibling;
alert(ps.innerHTML);
});
myclick("btn09",function(){
var un=document.getElementById('username');
alert(un.value);
});
myclick("btn10",function(){
// 获取bj文本节点
// 1. var fc=bj.firstChild;
// alert(fc.nodeValue);
// 2.
alert(bj.firstChild.nodeValue);
});
}
</script>
</head>
<body>
<button id="btn07">点击</button>
<button id="btn08">点击</button>
<button id="btn09">点击</button>
<button id="btn10">点击</button>
<input id="username" value="123" type="button" />
<ul id="city">
<li id="bj">北京</li>
<li>东京</li>
<li>首尔</li>
</ul>
<ul><li>IOS</li><li id="andi"></li></ul>
</body>
</html>