前端之javascript的节点操作和Event
一 节点的增删改查
创建节点：createElement(标签名)：创建一个指定名称的节点。
追加节点：
追加一个子节点：somenode.appendChild(标签名)
指定某个位置前面添加一个节点：somenode.inserBefore(标签名，节点名)
删除节点：父节点.recoverChild(子节点)：通过父节点删除某个子节点。
替换节点：父节点.replaceChild(新标签，要替换的节点)
拷贝节点：element.cloneNode：拷贝节点，参数true：深拷贝；参数false：浅拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
width:500px;
height:400px;
background-color:#979797;
}
</style>
</head>
<body>
<div class="d1">
<span class="s1">hello</span>
<span class="s2">word</span>
</div>
<button class="b1">添加</button>
<button class="b2">删除</button>
<button class="b3">替换</button>
<script>
var ele_append=document.getElementsByClassName('b1')[0];
var ele_div=document.getElementsByClassName('d1')[0];
var ele_remove=document.getElementsByClassName('b2')[0];
var ele_replace=document.getElementsByClassName('b3')[0];
ele_append.onclick=function(){
var ele_img=document.createElement('img');
ele_img.src='666.png';
ele_div.appendChild(ele_img);
}; ele_remove.onclick=function(){
var ele_span=document.getElementsByClassName('s1')[0];
ele_div.removeChild(ele_span)
}; ele_replace.onclick=function () {
var ele_span2=document.getElementsByClassName('s2')[0];
var ele_span3=document.createElement('input');
ele_span3.value='fangjie';
ele_div.replaceChild(ele_span3,ele_span2);
}; </script>
</body>
</html>
二 模态对话框实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin: 0;
} .masking{
position:fixed;
top:0;
left:0;
right: 0;
bottom:0;
background-color: #d0d0cf;
opacity: 0.5;
} .enter{
width: 600px;
height:300px;
background-color: #ffffee;
text-align: center;
margin-left: 25%;
margin-top: 150px;
} .p2{
width: 100%;
height: 50px;
margin-top: 50px;
} .p1{
margin-top: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body> <button class="add_to">添加</button>
<div class="masking hide">
<div class="enter">
<div class="p2"></div>
<form action="" >
<p class="p1">姓名<input type="text"></p>
<p class="p1">年龄<input type="text"></p>
<p class="p1">班级<input type="text"></p>
<input type="button" value="确认"class="p1 p3">
<input type="button" value="取消" class="p1 p3">
</form>
</div>
</div> <script>
var ele_add=document.getElementsByClassName('add_to')[0];
var ele_masking=document.getElementsByClassName('masking')[0];
ele_add.onclick=function () {
ele_masking.classList.remove('hide');
}; var ele_pop=document.getElementsByClassName('p3');
for (var i=0;i<ele_pop.length;i++){
if (ele_pop[i].value=='确认'){
ele_pop[i].onclick=function () {
ele_masking.classList.add('hide')
//后面的加到练习中
}
}
else if (ele_pop[i].value=='取消'){
ele_pop[i].onclick=function () {
ele_masking.classList.add('hide')
}
}
}
</script> </body>
</html>
三 DOM Event
Event代表的是事件的状态，例如事件在其中发生的元素，键盘按键的状态，鼠标的位置或者鼠标按键的状态。
属性：
| 属性 | 此事件发生在何时... |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
四 事件绑定的方式
方式1：调用标签对象，在使用标签对象下面的onclick方法绑定
<body>
<p id="p1">hello</p>
<script>
var ele_p=document.getElementById('p1');
ele_p.onclick=function(){
console.log(this) // <p id="p1">hello</p>
};
</script>
</body>
方式2：定义事件，然后再在标签的内部调用事件
<body>
<p id="p1" onclick="foo(this)">hello</p>
<script>
function foo(self){ // self是形参 可以是任意变量名，但不可以this。
console.log(self) // <p id="p1" onclick="foo(this)">hello</p>
};
</script>
事件介绍：
onload：属性在开发时只给body元素加上触发事件。标志这页面加载完成。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script>
/*
window.onload=function(){
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}; */ function fun() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
} </script>
</head>
<body onload="fun()"> <p id="ppp">hello p</p> </body>
</html>
onsubmit：表单在提交时触发，该属性也只是给form元素使用场景。在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <script> window.onload=function(){
//阻止表单提交方式1().
//onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行. var ele=document.getElementById("form");
ele.onsubmit=function(event) {
// alert("验证失败 表单不会提交!");
// return false; // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
alert("验证失败 表单不会提交!");
event.preventDefault(); } }; </script>
</head>
<body> <form id="form">
<input type="text"/>
<input type="submit" value="点我!" />
</form> </body>
</html>
事件传播：
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;"> </div>
</div> <script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
};
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
onselect：
<input type="text"> <script>
var ele=document.getElementsByTagName("input")[0]; ele.onselect=function(){
alert(123);
} </script>
onchange：
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select> <script>
var ele=document.getElementsByTagName("select")[0]; ele.onchange=function(){
alert(123);
} </script>
onkeydown：事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
<input type="text" id="t1"/>
<script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function(e){
e=e||window.event;
var keynum=e.keyCode;
var keychar=String.fromCharCode(keynum);
alert(keynum+'----->'+keychar);
};
</script>
onmouseout和onmouseleave的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
width: 300px;
}
#title{
cursor: pointer;
background: #ccc;
}
#list{
display: none;
background:#fff;
} #list div{
line-height: 50px;
}
#list .item1{
background-color: green;
} #list .item2{
background-color: rebeccapurple;
} #list .item3{
background-color: lemonchiffon;
} </style>
</head>
<body> <p>先看下使用mouseout的效果:</p> <div id="container">
<div id="title">使用了mouseout事件↓</div>
<div id="list">
<div class="item1">第一行</div>
<div class="item2">第二行</div>
<div class="item3">第三行</div>
</div>
</div> <script> // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 var container=document.getElementById("container");
var title=document.getElementById("title");
var list=document.getElementById("list"); title.onmouseover=function(){
list.style.display="block";
}; container.onmouseleave=function(){ // 改为mouseout试一下
list.style.display="none";
}; /* 因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none"; */ /*
思考:
if: list.onmouseout=function(){
list.style.display="none";
}; 为什么移出第一行时,整个list会被隐藏? 其实是同样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,所以离开任何一个
子元素同样会触发list.style.display="none"; */ </script>
</body>
</html>
五 实例练习
左侧菜单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 20%;
height: 500px;
float: left;
background-color: wheat;
} .right{
float: left;
width: 80%;
height: 500px;
background-color: lightgray; } .title{
text-align: center;
line-height: 40px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
} .hide{
display: none;
}
</style>
</head>
<body> <div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div> <script> var eles_title=document.getElementsByClassName("title"); for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function(){ this.nextElementSibling.classList.remove("hide"); for(var j=0;j<eles_title.length;j++){ if (eles_title[j]!=this){
eles_title[j].nextElementSibling.classList.add("hide")
} } } } </script>
</body>
</html>
模态对话框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: white;
height: 2000px;
} .shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: grey;
opacity: 0.4;
} .hide{
display: none;
} .models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: wheat; }
</style>
</head>
<body>
<div class="back">
<input class="c" type="button" value="click">
</div> <div class="shade hide handles"></div> <div class="models hide handles">
<input class="c" type="button" value="cancel">
</div> <script> var eles=document.getElementsByClassName("c");
var handles=document.getElementsByClassName("handles");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function(){ if(this.value=="click"){ for(var j=0;j<handles.length;j++){ handles[j].classList.remove("hide"); } }
else {
for(var j=0;j<handles.length;j++){ handles[j].classList.add("hide");
} }
}
} </script> </body>
</html>
二级联动：
<select id="province">
<option>请选择省:</option>
</select> <select id="city">
<option>请选择市:</option>
</select> <script>
data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]}; var p=document.getElementById("province");
var c=document.getElementById("city"); for(var i in data){
var option_pro=document.createElement("option"); option_pro.innerHTML=i; p.appendChild(option_pro);
}
p.onchange=function(){ pro=(this.options[this.selectedIndex]).innerHTML;
citys=data[pro]; c.options.length=0; for (var i in citys){
var option_city=document.createElement("option");
option_city.innerHTML=citys[i];
c.appendChild(option_city);
} }
</script>
跑马灯：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{margin:0; padding:0; list-style:none;}
body{
font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
}
h3{
text-align: center;
color:darkcyan;
margin-top: 30px;
letter-spacing: 5px;
}
.box{
width: 1000px;
margin:50px auto 0px;
}
#title{
line-height: 40px;
background-color: rgb(247,247,247);
font-size: 16px;
font-weight: bold;
color: rgb(102,102,102);
}
#title span{
float: left;
width: 166px;
text-align: center;
}
#title span:hover{
/*color: black;*/
cursor: pointer;
}
#content{
margin-top: 20px;
}
#content li{
width: 1050px;
display: none;
background-color: rgb(247,247,247);
}
#content li div{
width: 156px;
margin-right: 14px;
float: left;
text-align: center;
}
#content li div a{
font-size: 14px;
color: black;
line-height: 14px;
/* float: left;*/
display: inline-block;
margin-top: 10px;
}
#content li a:hover{
color: #B70606;
}
#content li div span{
font-size: 16px;
line-height: 16px;
/*float: left;*/
display: block;
color: rgb(102,102,102);
margin-top: 10px;
}
#content img{
float: left;
width: 155px;
height: 250px;
}
#title .select{
background-color: #2459a2;
color: white;
border-radius: 10%;
}
#content .show{
display: block;
} .show span{
color: red!important;
font-size: 30px;
}
</style>
</head> <body>
<h3 id="wel">京东商城欢迎您</h3>
<!-- direction="right up down left" -->
<!-- behavior：滚动方式(包括3个值：scroll、slide、alternate) -->
<!-- 说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 -->
<!-- scrollamount="5" 滚动速度 --> <marquee behavior="scroll" direction="right">欢迎您苑昊先生</marquee>
<script> function test(){ var mywel = document.getElementById("wel");
var content = mywel.innerText; var f_content = content.charAt(0);
var l_content = content.substring(1,content.length); var new_content = l_content + f_content;
mywel.innerText = new_content; } // setInterval("test();", 500);
</script>
<div class="box">
<p id="title">
<span class="select">家用电器</span>
<span>家具</span>
<span>汽车</span>
<span>食品</span>
<span>女鞋</span>
<span>医疗保健</span>
</p> <ul id="content">
<li class="show"> <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>
<div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div>
<div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>
<div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div>
<div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div>
</li> <li> <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div> </li>
<li>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>
</li>
<li> <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div> </li>
<li> <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>
<div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div> </li>
<li> <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div> </li> </ul>
</div> <script>
var title=document.getElementById('title');
var content=document.getElementById('content');
var category=title.getElementsByTagName('span');
var item=content.getElementsByTagName('li'); for (var i = 0; i < category.length; i++) { category[i].index=i; category[i].onclick=function(){ for (var j = 0; j < category.length; j++) {
category[j].className='';
item[j].className='';
}
this.className='select';
item[this.index].className='show';
} } </script>
</body>
</html>
六 js扩展
js的作用域：
作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作 用域链的工作原理。
任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作 用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局 部作用域两种。
全局作用域：在代码中任何地方都能访问到的对象拥有全局作用域
最外层函数和在最外层函数外面定义的变量拥有全局作用域
var name="yuan";
function foo(){
var age=23;
function inner(){
console.log(age);
}
inner();
}
console.log(name); // yuan
//console.log(age); // Uncaught ReferenceError: age is not defined
foo(); // 23
inner(); // Uncaught ReferenceError: inner is not defined
所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：
var name="yuan";
function foo(){
age=23;
var sex="male"
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined
所有window对象的属性拥有全局作用域
一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。
局部作用域：和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.
如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）
作用域链(Scope Chain)：在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
实例：
//-----**********************例1********************************* var s=12;
function f(){
console.log(s);
var s=12; // if s=12
console.log(s)
}
f(); //-----**********************例2********************************* var s=10;
function foo(){
console.log(s);
var s=5;
console.log(s);
function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作 console.log(s);
} foo(); //-----***********************例3******************************** function bar(age) { console.log(age);
var age = 99;
var sex= 'male';
console.log(age);
function age() {
alert(123)
};
console.log(age);
return 100;
} result=bar(5); //-----********************************************************
结果分析：我相信大家一定会有想不到的结果，接下来我们就以最复杂的例3来分析整个过程。
当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示：
解析到函数调用时，即bar(5)，会生成一个active object的对象，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：
过程解析：
function bar(age) {
console.log(age);
var age = 99;
var sex="male";
console.log(age);
function age(){
alert(123);
} ;
console.log(age);
return 100;
}
result=bar(5);
一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)：
1-1 、分析参数，有一个参数，形成一个 AO.age=undefine;
1-2 、接收参数 AO.age=5;
1-3 、分析变量声明，有一个 var age, 发现 AO 上面有一个 AO.age ，则不做任何处理
1-4 、分析变量声明，有一个 var sex，形成一个 AO.sex=undefine;
1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程：
2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数
2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99 ，所以在第二个输出的age是 99;
2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。
注意：执行阶段：
function age(){
alert(123)
} ;
不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。
前端之javascript的节点操作和Event的更多相关文章
- Python之路day13 web 前端（JavaScript，DOM操作）
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- JavaScript DOM节点操作总结
节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...
- JavaScript 之 节点操作
一.文档树结构 DOM 可以将任何 HTML 或 XML 描绘成一个由多层节点构成的结构. 节点分为不同的类型,每种类型分别表示文档中不同的信息.每个节点都拥有各自的特点.数据和方法,另外也与其他节点 ...
- javaScript之节点操作
javaScript程序员避免不了要操作页面中的DOM,除了经常使用的: appendChild()向childNodes列表的末尾添加一个节点. insertBefore(),接受两个参数,要插入的 ...
- JavaScript DOM–节点操作
节点 节点至少拥有nodeType(节点类型).nodeName(节点名称)和nodeValue(节点值)这三个基本属性. 元素节点 nodeType 为1 属性节点 nodeType 为2 文本 ...
- 前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- 前端笔记之jQuery（下）事件&节点操作&净位置&拖拽&页面卷动值&遍历JSON
一.监听事件大全 1.1 JavaScript事件 onblur 元素失去焦点 onchange 用户改变域的内容 onclick 鼠标点击某个对象 ondblclick 鼠标双击某个对象 onfoc ...
- JavaScript -- 节点操作， 事件触发， 表单伸缩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- NAT和Proxy的区别
在internet共享上网技术上,一般有两种方式,一种是proxy代理型,一种是NAT网关型,关于两者的区别与原理,身边很多人都不是很明白,下面我来讲讲我的理解,如有不对的,欢迎指正. 1.先说应用例 ...
- CentOS 下搭建SVN
CentOS 7下搭建配置SVN服务器 1. 安装 CentOS通过yum安装subversion. $ sudo yum install subversion subversion安装在/bin目录 ...
- appium ,selenium ,webdriver 运行原理与机制
做测试开发的童鞋都知道,UI自动化你绕不开selenium, webdrvier, appium框架,那么这三者之间有什么关联,它们的原理是什么呢? 简单来说就是: Selenium2 将浏览器原生 ...
- Bitmap byte[] InputStream Drawable 互转
import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.InputStrea ...
- oracle数据库查询出多条数据，合并，之后列转行
select B.enterprise_code, B.enterprise_name, sum(B.h0_overnum) AS over00, sum(B.h1_overnum) AS over0 ...
- 前端 websocket用法
<!DOCTYPE html> <meta charset="utf-8" /> <title>WebSocket Test</title ...
- How to set the bash display to not show the vim text after exit?
Xshell客户端在vim编辑文件保存退出,仍然显示文本内容,而不是回到shell terminal终端. 解决办法如下: User1 is using TERM=xterm, in this cas ...
- iOS开发时使用的bundle路径
bundle是一个目录,其中包含了程序会使用到的资源. 这些资源包含了如图像,声音,编译好的代码,nib文件(用户也会把bundle称为plug-in). 对应bundle,cocoa提供了类NSBu ...
- java调用dll
@参考文章1,@参考文章2 根据上篇博客(参考文章2)java生成的dll测试 1,新建java项目,新建WebContent,子目录建WEB-INF\lib,加进jna-3.4.0.jar 新建ja ...
- HTML转义字符 Unicode和CSS伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ ...