1. dom對(duì)象的innerText
和innerHTML
有什么區(qū)別?
-
innerText
用于獲取元素內(nèi)的文本內(nèi)容剩瓶; -
innerHTML
用于獲取元素內(nèi)的HTML結(jié)構(gòu)驹溃。
2. elem.children
和elem.childNodes
的區(qū)別?
-
elem.children
屬性返回一個(gè)動(dòng)態(tài)的HTMLCollection集合儒搭,由當(dāng)前節(jié)點(diǎn)所有的Element
子節(jié)點(diǎn)組成吠架; -
elem.childNodes
屬性返回一個(gè)NodeList對(duì)象(類數(shù)組對(duì)象),包括但不限于Element節(jié)點(diǎn)搂鲫,還包括Text節(jié)點(diǎn)(換行傍药,空格)和
注釋節(jié)點(diǎn)。
3. 查詢?cè)赜袔追N常見的方法魂仍?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task22</title>
<style type="text/css">
</style>
</head>
<body>
<div id="div1" class="wrap">
<a href="#" name="link1">jirengu</a>
</div>
<div id="div2" class="wrap">
<a href="#" name="link2">hello <span>world</span></a>
</div>
<script type="text/javascript">
var byId = document.getElementById('div1'); // 1
var byCls = document.getElementsByClassName('wrap'); // 2
var byTgName = document.getElementByTagName('span'); // 3
var byName = document.getElementByName('link1'); // 4
var getEl = document.querySelector('#div1'); // 5
var getEls = document.querySelectorAll('.wrap'); // 6
</script>
</body>
</html>
4. 如何創(chuàng)建一個(gè)元素拐辽?如何給元素設(shè)置屬性?
- 可以通過
createElement()
方法創(chuàng)建新的HTML元素節(jié)點(diǎn)擦酌;通過setAttribute()
方法設(shè)置元素屬性俱诸。
var newDiv = document.createElement('div');
newDiv.setArrribute('class','wrap');
5. 元素的添加登失、刪除烙无?
- 使用
appendChild
方法在元素內(nèi)的最后位置添加新元素節(jié)點(diǎn)傻粘;通過removeChild
方法刪除元素篡帕。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task22</title>
<style type="text/css">
#purchases .sale {
color:red;
}
</style>
</head>
<body>
<h1>What to buy</h1>
<p>Don't forget to buy this stuff.</p>
<ul id="purchases">
<li>A tin of beans</li>
<li class="sale">Cheese</li>
<li class="sale important">Milk</li>
</ul>
<script type="text/javascript">
var newLi = document.createElement('li'); // 創(chuàng)建新的 li 元素節(jié)點(diǎn)
var oldLi = document.querySelector('.important'); // 獲取需要?jiǎng)h除的元素節(jié)點(diǎn)
var newContent = document.createTextNode('Apple') // 創(chuàng)建新的內(nèi)容節(jié)點(diǎn)
var ul = document.getElementById('purchases'); // 獲取需要添加位置的父元素節(jié)點(diǎn)
ul.removeChild(oldLi); // 從父節(jié)點(diǎn)上刪除子節(jié)點(diǎn)
newLi.appendChild(newContent); // 將內(nèi)容節(jié)點(diǎn)添加到新的 li 節(jié)點(diǎn)上
newLi.setAttribute('class','sale'); // 給新的 li 節(jié)點(diǎn)添加 class 屬性
ul.appendChild(newLi); // 將 newLi 添加到 HTML 內(nèi)
</script>
</body>
</html>
Paste_Image.png
6. DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別?
- DOM0事件是將時(shí)間作為元素的一個(gè)屬性罢绽,當(dāng)需要對(duì)事件進(jìn)行監(jiān)聽時(shí)师逸,只要將需要執(zhí)行的函數(shù)賦值給這個(gè)屬性即可津滞,需要?jiǎng)h除該事件監(jiān)聽是只需將該屬性的值改為null即可寓调;該方法操作直觀簡(jiǎn)便锌唾,兼容性最好,但一個(gè)事件只能綁定一個(gè)函數(shù)。
// HTML
var btn = document.querySelector('#btn');
// JS
btn.onclick = function() {
console.log('DOM0');
}
- DOM2級(jí)事件是使用元素的
addEventListener
和removeEventListener
方法對(duì)事件進(jìn)行監(jiān)聽晌涕,事件類型和處理函數(shù)做為上述方法的參數(shù)滋捶,其中addEventListener
方法只能通過removeEventListener
取消。該方法可以為一個(gè)事件綁定多個(gè)函數(shù)余黎。
// HTML
var btn = document.querySelector('#btn');
// JS
btn.addEventListener('click', function(){
console.log('DOM2');
})
7. attachEvent
與addEventListener
的區(qū)別重窟?
-
addEventListener
對(duì)IE8 及之前的版本不兼容,只能用attachEvent
對(duì)事件進(jìn)行監(jiān)聽惧财,同時(shí)亲族,監(jiān)聽事件的取消也只能用detachEvent
實(shí)現(xiàn)而不能使用removeEventListener
。
Paste_Image.png
-
attachEvent
添加的事件處理程序只能發(fā)生在事件冒泡過程中可缚,而addEventListener
的第三個(gè)參數(shù)可以決定事件處理程序是在捕獲階段還是在冒泡階段處理,一般瀏覽器默認(rèn)發(fā)生在冒泡階段(即第三個(gè)參數(shù)默認(rèn)為false)斋枢; -
addEventListener
方法第一個(gè)參數(shù)是事件類型(如click
帘靡、load
),而attachEvent
的第一個(gè)參數(shù)是事件名稱(如onclick
瓤帚、onload
)描姚; - 二者事件處理程序的作用域不同。
addEventListener
事件的作用域是元素本身戈次,而attachEvent
的事件處理程序會(huì)在全局作用域內(nèi)運(yùn)行轩勘; - 為一個(gè)事件添加多個(gè)事件處理程序時(shí),執(zhí)行順序不同怯邪。
addEventListener
會(huì)按照處理程序添加的順序執(zhí)行绊寻,而attachEvent
執(zhí)行多個(gè)事件處理程序的順序沒有規(guī)律。
8. 解釋IE事件冒泡和DOM2事件傳播機(jī)制悬秉?
- IE事件冒泡機(jī)制中事件最開始是由最具體的元素接收澄步,然后向其祖先元素進(jìn)行傳播,其祖先元素可以在此過程中接收事件并引發(fā)事件處理程序和泌;
- DOM2事件傳播在根節(jié)點(diǎn)到事件發(fā)生的具體元素過程中提供了截取事件的機(jī)會(huì)村缸,然后則是冒泡機(jī)制。
9. 如何阻止事件冒泡武氓? 如何阻止默認(rèn)事件梯皿?
- 通過
stopPropagation()
方法可以阻止事件冒泡; - 通過
preventDefault()
可以阻止默認(rèn)事件县恕。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task22</title>
<style type="text/css">
.wrap {
height:100px;
width:100px;
background-color:red;
margin:50px;
}
.main {
height:70px;
width:70px;
background-color:yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<a class="link" >饑人谷</a>
</div>
</div>
<script type="text/javascript">
var wrap = document.querySelector('.wrap');
var main = document.querySelector('.main');
var link = document.querySelector('.link');
wrap.addEventListener('click', function(){
console.log('wrap');
})
main.addEventListener('click', function(){
console.log('main');
})
link.addEventListener('click', function(e){
e.preventDefault();
console.log('link');
e.stopPropagation();
})
</script>
</body>
</html>
單擊鏈接东羹,實(shí)現(xiàn)如下效果:
Paste_Image.png
代碼題
1. 有如下代碼,要求當(dāng)點(diǎn)擊每一個(gè)元素li
時(shí)控制臺(tái)展示該元素的文本內(nèi)容弱睦。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端9班</li>
</ul>
<script>
function $(str) {
return document.querySelector(str);
}
function $$(str) {
return document.querySelectorAll(str);
}
var ul = $('.ct');
ul.addEventListener('click', function(e){
console.log(e.target.innerText);
})
</script>
2. 補(bǔ)全代碼百姓,要求:
- 當(dāng)點(diǎn)擊按鈕
開頭添加
時(shí)在<li>這里是</li>
元素前添加一個(gè)新元素,內(nèi)容為用戶輸入的非空字符串况木;當(dāng)點(diǎn)擊結(jié)尾添加
時(shí)在<li>前端6班</li>
后添加用戶輸入的非空字符串. - 當(dāng)點(diǎn)擊每一個(gè)元素
li
時(shí)控制臺(tái)展示該元素的文本內(nèi)容垒拢。
實(shí)現(xiàn)效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task22-2</title>
</head>
<body>
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
function $(str){
return document.querySelector(str);
}
function $$(str){
return document.querySelectorAll(str);
}
var ul = $('.ct');
var ipt = $('.ipt-add-content');
var btnAddStart = $('#btn-add-start');
var btnAddEnd = $('#btn-add-end');
// 當(dāng)文本框內(nèi)容發(fā)生改變時(shí)獲取文本框value值并添加至新建的li標(biāo)簽內(nèi)
ipt.addEventListener('change', function(){
newLi = document.createElement('li');
newLi.innerText = ipt.value
})
// 定義兩個(gè)按鈕的單擊事件
btnAddStart.addEventListener('click', function() {
ul.insertBefore(newLi,ul.firstChild);
ipt.value = '';
})
btnAddEnd.addEventListener('click', function() {
ul.appendChild(newLi);
ipt.value = '';
})
ul.addEventListener('click', function(e){
if(e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
})
</script>
</body>
</html>
3. 補(bǔ)全代碼旬迹,要求:當(dāng)鼠標(biāo)放置在li
元素上,會(huì)在````img-preview里展示當(dāng)前
li元素的
data-img```對(duì)應(yīng)的圖片.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task22-3</title>
</head>
<body>
<ul class="ct">
<li data-img="images/task22-3-1.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="images/task22-3-2.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="images/task22-3-3.jpg">鼠標(biāo)放置查看圖片3</li>
<li data-img="images/task22-3-4.jpg">鼠標(biāo)放置查看圖片4</li>
</ul>
<div class="img-preview"></div>
<script>
var ul = document.querySelector('.ct');
var div = document.querySelector('.img-preview');
var newImg = document.createElement('img');
ul.addEventListener('mouseover', function(e){
if(e.target.tagName.toLowerCase() === 'li'){
var src = e.target.getAttribute('data-img');
newImg.src = src;
div.appendChild(newImg);
}
})
</script>
</body>
</html>
4. 實(shí)現(xiàn)如下圖Tab切換的功能
圖片地址
實(shí)現(xiàn)效果
代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task22-4</title>
<style type="text/css">
#tab {
border-collapse: collapse; /* 合并邊框 */
width: 500px;
border: 1px solid #888;
border-spacing: 0;
}
#tab td {
border: 1px solid #888;
padding: 0;
}
.tabs td {
text-align: center;
line-height: 30px;
cursor: pointer;
}
.tabs .active {
background-color: #ccc;
}
#tab .main {
height: 100px;
}
#tab .main td li {
list-style: none;
padding: 10px;
display: none;
}
#tab .main .active {
display: block;
}
</style>
</head>
<body>
<table id="tab">
<tr class="tabs">
<td>tab1</td>
<td>tab2</td>
<td>tab3</td>
</tr>
<tr class="main">
<td colspan="3">
<ul>
<li class="active">內(nèi)容一</li>
<li>內(nèi)容二</li>
<li>內(nèi)容三</li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
var tabs = $('.tabs')
var tabArr = $$('.tabs>td');
var mainArr = $$('.main li');
tabs.addEventListener('click', function(e){ // 在tabs上加時(shí)間監(jiān)聽
var clickNode = e.target;
if (clickNode.tagName.toLowerCase() === 'td') { // tabs的點(diǎn)擊效果
for (var i=0; i<tabArr.length; i++){
tabArr[i].classList.remove('active');
}
clickNode.classList.add('active');
}
var index = [].indexOf.call(tabArr,clickNode); // 利用index將tabs和mainList聯(lián)系起來
for (var i=0; i<mainArr.length; i++){
mainArr[i].classList.remove('active');
}
mainArr[index].classList.add('active');
})
function $(str) {
return document.querySelector(str);
}
function $$(str) {
return document.querySelectorAll(str);
}
</script>
</body>
</html>
5. 實(shí)現(xiàn)下圖的模態(tài)框功能
圖片地址
實(shí)現(xiàn)效果
代碼:
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task22-5</title>
<link rel="stylesheet" href="task22-5.css">
</head>
<body>
<div class="btn-wrap">
<button type="button" id="btn-boss">點(diǎn)我</button>
</div>
<div class="modal">
<div class="dialog-box">
<div class="header">
<h1>我是標(biāo)題</h1>
<a class="close icon-close" href="#"></a>
</div>
<div class="contents">
<p>我是內(nèi)容1</p>
<p>我是內(nèi)容2</p>
</div>
<div class="footer">
<a class="btn confirm" href="#">確定</a>
<a class="btn cancel" href="#">取消</a>
</div>
</div>
</div>
<script type="text/javascript" src="task22-5.js"></script>
</body>
</html>
- CSS
div,p,h1,h2,h3,h4,h5,h6,a,button{
margin: 0;
padding: 0;
font-size: 16px
}
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1471481907'); /* IE9*/
src: url('iconfont.eot?t=1471481907#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1471481907') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1471481907') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1471481907#iconfont') format('svg'); /* iOS 4.1- */
}
.icon-close {
font-family:"iconfont" ;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before { content: "\e62d"; }
a {
text-decoration: none;
color: #333;
}
.modal {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.3)
}
.dialog-box {
width: 400px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.dialog-box .header {
border-bottom: 1px solid #aaa;
}
.dialog-box .header h1 {
line-height: 40px;
display: inline-block;
margin-left: 15px;
}
.dialog-box .header .close {
display: table-cell;
float: right;
line-height: 40px;
margin-right: 15px;
}
.dialog-box .contents {
padding:15px;
border-bottom: 1px solid #ccc;
}
.dialog-box .contents p {
line-height: 30px;
}
.dialog-box .footer .btn {
line-height: 40px;
float: right;
margin-right: 15px;
}
- JS
function $(str) {
return document.querySelector(str);
}
function $$(str) {
return document.querySelectorAll(str);
}
var btnBoss = $('#btn-boss');
var modal = $('.modal');
var dialogBox = $('.dialog-box');
function hasClass(ele, cls) {
var reg = new RegExp('\\b' + cls + '\\b','ig');
return reg.test(ele.className)
}
btnBoss.addEventListener('click', function(){
modal.style.display = 'block';
})
dialogBox.addEventListener('click', function(e){
e.stopPropagation();
if (hasClass(e.target, 'close') || hasClass(e.target, 'cancel')) {
modal.style.display = 'none';
}
})
modal.addEventListener('click', function(e){
modal.style.display = 'none';
})
本教程版權(quán)歸本人和饑人谷所有求类,轉(zhuǎn)載請(qǐng)注明來源奔垦。