Dom、事件
2016-10-11 本文已影响27人
咩咩咩1024
一、dom对象的innerText和innerHTML有什么区别？
1.innerText:是一个可写属性,返回元素内容包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容;
<div>
<p>
123
<span>456</span>
</p>
</div>
<script>
var div=document.getElementsByTagName("div")[0];
div.innerText;
div.innerText="<a href='#'>link</a>";
</script>
输出结果
2.innerHTML:属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM;
<div>
<p>
123
<span>456</span>
</p>
</div>
<script>
var div=document.getElementsByTagName("div")[0];
div.innerHTML;
div.innerHTML="<a href='#'>link</a>";
</script>
输出内容
二、elem.children和elem.childNodes的区别？
1.element.children只返回父元素的所有HTML标签子元素;
2.element.childNodes返回父元素的所有HTML标签子元素子元素和文本节点(空格,换行符等);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
123
<a href="#">链接</a>
<span>456</span>
</p>
</div>
</body>
</html>
输出结果
三、查询元素有几种常见的方法？
1.getElementById()：返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
123
<span>456</span>
</p>
</div>
</body>
</html>
输出结果
2.getElementsByClassName()：返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回的结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
输出结果
3.getElementsByTagName()：返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<input type="text" name="password" placeholder="请输入密码">
</form>
</body>
</html>
输出结果
4.getElementsByName()：用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
输出结果
5.querySelector()：返回匹配指定的CSS选择器的元素节点。如果多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
输出结果
6.querySelectorAll()：方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所有元素节点的变化无法实时反映在返回结果中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
<p>
<span>456</span>
</p>
</div>
</body>
</html>
输出结果
四、如何创建一个元素？如何给元素设置属性？
1.createElement方法用来生成HTML元素节点。参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。
var newDiv = document.createElement("div")
2.setAttribute()方法用于设置元素属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1">
123
<p>
<span>456</span>
</p>
</div>
</body>
</html>
输出结果
五、元素的添加、删除？
1.appendChild()：在元素末尾添加元素；
2.insertBefore()：在某个元素之前插入元素；
3.replaceChild()：接受两个参数，要插入的元素和要替换的元素；
4.removeChild()：删除元素；
六、DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
1.DOM0级事件处理程序通过JS制定事件处理程序的传统方法，将一个函数赋值给一个事件处理程序属性进行事件监听；DOM2级事件处理程序是通过定义了 addEventListener()和 removeEventListener()来进行事件监听。
2.DOM0级事件处理程序不能添加多个事件处理程序，而DOM2级事件处理程序可以。
3.DOM0级事件处理程序不能选择是在事件捕获阶段调用事件处理程序还是在冒泡阶段调用事件处理程序，而DOM2级事件处理程序可以。
<body>
<div id="ct">
<a href="#" class="btn">点击</a>
</div>
<script>
//DOM0级事件处理程序
document.querySelector(".btn").onclick=function(){
console.log("DOM0级事件处理程序");
};
//DOM2级事件处理程序
var handler1=function(){
console.log("DOM2级事件处理程序1");
};
var handler2=function(){
console.log("DOM2级事件处理程序2");
};
document.querySelector(".btn").addEventListener("click",handler1,true);
document.querySelector(".btn").addEventListener("click",handler2,true);
</script>
</body>
输出结果
七、attachEvent与addEventListener的区别？
1.参数个数不相同。这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理。
2.第一个参数意义不同。addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）。
3.事件处理程序的作用域不相同。addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id。
4.为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理时顺序无规律（添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了），所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理不要指望浏览器。
八、解释IE事件冒泡和DOM2事件传播机制？
1.IE事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
2.DOM2级事件：其规定事件流包括三个阶段（事件捕获阶段、处于目标阶段、事件冒泡阶段），首先发生的是事件捕获，为截获事件提供了机会，然后是实际的目标接受到了事件，最后是冒泡阶段，这个阶段对事件做出响应。
九、如何阻止事件冒泡？ 如何阻止默认事件？
1.阻止事件冒泡：IE:event.cancleBuble = true; //默认：false
大多数浏览器：event.stopPropagation();
2.阻止默认事件：IE:event.returnvalue = false; //默认:true
大多数浏览器：event.preventDefault();
代码练习
十、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
方法一:DOM2级事件处理
<body>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务6班</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
lis[i].addEventListener("click",function(){
console.log(this.innerText);
});
}
</script>
</body>
方法一
预览地址
方法二:DOM2级事件处理
<body>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务6班</li>
</ul>
<script>
var oul=document.querySelector(".ct");
function handler(event){
console.log(event.target.innerText);
}
oul.addEventListener("click",handler);
</script>
</body>
方法二
预览地址
方法三:DOM0级事件处理
<body>
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务6班</li>
</ul>
<script>
var oul=document.getElementsByTagName('li');
for(var i=0;i<oul.length;i++){
oul[i].onclick=function(){
console.log(this.innerText);
}
}
</script>
</body>
方法三
预览地址
十一、补全代码，要求：
-
1.当点击按钮开头添加时在
<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串。 -
2.当点击每一个元素li时控制台展示该元素的文本内容。
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>
做法:DOM0级事件处理程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务6班</li>
</ul>
<input id="txt" placeholder="添加内容"/>
<button id="btns">开头添加</button>
<button id="btne">结尾添加</button>
</body>
<script>
window.onload=function() {
var oBtns = document.getElementById("btns");
var oBtne = document.getElementById("btne");
var oUl = document.getElementById("ct");
var oTxt = document.getElementById("txt");
var aLi = oUl.getElementsByTagName("li");
oBtns.onclick = function () {
var oLi = document.createElement("li");
oLi.innerHTML = oTxt.value;
oUl.insertBefore(oLi, aLi[0]);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
};
oBtne.onclick = function () {
var oLi = document.createElement("li");
oLi.innerHTML = oTxt.value;
oUl.appendChild(oLi);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
};
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
}
</script>
</html>
输出结果
预览地址
做法二:DOM2级事件处理程序
<body>
<ul id="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>任务6班</li>
</ul>
<input id="txt" placeholder="添加内容"/>
<button id="btns">开头添加</button>
<button id="btne">结尾添加</button>
</body>
<script>
var oBtns=document.getElementById("btns");
var oBtne=document.getElementById("btne");
var oUl=document.getElementById("ct");
var oTxt=document.getElementById("txt");
var aLi=oUl.getElementsByTagName("li");
function oBtn1(){
var oLi=document.createElement("li");
oLi.innerHTML=oTxt.value;
oUl.insertBefore(oLi,aLi[0]);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
}
function oBtn2(){
var oLi=document.createElement("li");
oLi.innerHTML=oTxt.value;
oUl.appendChild(oLi);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
}
oBtns.addEventListener("click",oBtn1,false);
oBtne.addEventListener("click",oBtn2,false);
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
console.log(this.innerText);
}
}
</script>
输出结果
预览地址
十二、补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。
<ul class="ct">
<li data-img="1.png">鼠标放置查看图片1</li>
<li data-img="2.png">鼠标放置查看图片2</li>
<li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>
1.做法一:DOM0级事件处理程序
<body>
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct=document.querySelector(".ct");
var childs=ct.querySelectorAll("li");
var preview=document.querySelector(".img-preview");
for(var i=0;i<childs.length;i++){
childs[i].onmouseover=function (){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = '<img src="' + dataImg + '">'
}
}
</script>
</body>
2.做法二:DOM2级事件处理程序
<body>
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct=document.querySelector(".ct");
var childs=ct.querySelectorAll("li");
var preview=document.querySelector(".img-preview");
for(var i=0;i<childs.length;i++){
childs[i].addEventListener("mouseover",function(){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = '<img src="' + dataImg + '">'
});
}
</script>
</body>
十三、实现如下图Tab切换的功能?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body,ul,li{
margin: 0;
padding: 0;
}
.mod-tab{
border:1px solid;
}
.mod-tab * {
box-sizing: border-box;
}
.mod-tab li{
float: left;
list-style: none;
width: 33.33%;
text-align: center;
height: 30px;
line-height: 30px;
font-size: 22px;
border-right: 1px solid;
border-bottom: 1px solid;
cursor: pointer;
}
.mod-tab li:last-child{
border-right: none;
}
.tabs:after{
content: "";
display: block;
clear: both;
}
.mod-tab .tabs .active{
background: #eee;
}
.mod-tab .panel{
height: 180px;
padding: 20px;
display: none;
}
.mod-tab .active{
display: block;
}
</style>
</head>
<body>
<div class="mod-tab">
<ul class="tabs">
<li class="active">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div class="panel active panel1">内容1</div>
<div class="panel">内容2</div>
<div class="panel">内容3</div>
</div>
<script>
var oUl=document.querySelector(".tabs");
var oDiv=document.querySelector(".panel");
oUl.addEventListener("click",function(event){
var txt=event.target.innerText;
for(var i=0;i<oUl.children.length;i++){
oUl.children[i].style.backgroundColor="#fff";
}
event.target.style.backgroundColor="#eee";
oDiv.innerText="内容"+txt[txt.length-1];
})
</script>
</body>
</html>
十四、实现下图的模态框功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html,body,h3,p,ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#div1{
width: 300px;
height: 200px;
border: 1px solid #ccc;
margin: 0 auto;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
margin: -150px 0 0 -150px;
display: none;
}
#header h3{
padding: 10px;
}
span{
position: absolute;
right: 0;
top: 0;
padding: 10px;
font-size: 20px;
color: black;
cursor: pointer;
}
#cover{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.4;
background:#000;
display: none;
}
#header,#content{
border-bottom: 1px solid #ccc;
}
#content{
height: 100px;
line-height: 40px;
padding: 10px;
}
#footer ul li{
float: left;
margin-right: 5px;
padding: 8px 0;
}
#footer ul li button{
columns: pointer;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
#footer ul{
float: right;
}
</style>
</head>
<body>
<input id="btn" type="button" value="点我1">
<div id="cover"></div>
<div id="div1">
<div id="header">
<h3>我的标题1</h3>
<span>×</span>
</div>
<div id="content">
<p>我的内容1</p>
<p>我的内容2</p>
</div>
<div id="footer">
<ul>
<li><button id="btn1">取消</button></li>
<li><button>确定</button></li>
</ul>
</div>
</div>
<script>
var oDiv1=document.querySelector("#div1"),
aBtn=document.querySelector("#btn"),
aBtn1=document.querySelector("#btn1"),
aSpan=document.querySelector("span"),
aCover=document.querySelector("#cover");
function handler1(){
oDiv1.style.display="none";
aCover.style.display="none";
}
function handler2(){
oDiv1.style.display="block";
oDiv1.style.backgroundColor="#fff";
aCover.style.display="block";
}
aBtn.addEventListener("click",handler2);
aSpan.addEventListener("click",handler1);
aBtn1.addEventListener("click",handler1);
aCover.addEventListener("click",handler1);
</script>
</body>
</html>
