補全代碼，要求：當鼠標放置在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>
//你的代碼
</script>
<script>
var list = document.querySelector(".ct");
var preview = document.querySelector(".img-preview");
var newimg = document.createElement("img");
list.addEventListener("mouseover",function(e){
if(e.target.tagName.toLowerCase() === 'li'){
newimg.src = e.target.getAttribute('data-img');
preview.appendChild(newimg);
}
});
list.addEventListener("mouseout",function(){
preview.removeChild(newimg);
});
</script>
補全代碼，要求：
當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內容。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結尾添加</button>
<script>
//你的代碼
</script>
<script>
var addStart = document.querySelector("#btn-add-start");
var addEnd = document.querySelector("#btn-add-end");
var content = document.querySelector(".ipt-add-content");
var list = document.querySelector(".ct");
addStart.addEventListener("click",function(){
if(content.value !== ""){
var newLi = document.createElement("li");
newLi.innerText = content.value;
list.insertBefore(newLi,list.firstChild);
}
});
addEnd.addEventListener("click",function(){
if(content.value !== ""){
var newLi = document.createElement("li");
newLi.innerText = content.value;
list.appendChild(newLi);
}
});
list.addEventListener("click",function(e){
console.log(e.target.innerText);
});
</script>
有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端14班</li>
</ul>
<script>
//todo ...
</script>
<script>
var list = document.querySelector(".ct");
list.addEventListener("click",function(e){
console.log(e.target.innerText);
},false);
</script>
解釋DOM2事件傳播機制。
DOM2級事件規定事件流包括三個階段 ：
1. 事件捕獲階段，
2. 處于目標階段，
3. 時間冒泡階段，
首先發生的是事件捕獲，為截取事件提供機會，然后是實際目標接受事件，最后是冒泡階段
onlick與addEventListener的區別？
addEventListener是在 FireFox 上的用法。
addEventListener的參數一共有三個，語法為：
element.addEventListener(type,listener,useCapture)
詳解
其中element是要綁定函數的對象。
type是事件名稱，要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on"。
listener當然就是綁定的函數了，記住不要跟括號
最后一個參數是個布爾值，表示該事件的響應順序,下面重點介紹一下addEventListener的第3個參數(useCapture)。
userCapture若為true,則瀏覽器采用Capture,若為false則采用bubbing方式。建議用false
區別：
Javascript代碼 收藏代碼
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
執行順序為method1->method2->method3
Javascript代碼 收藏代碼
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果這樣寫,那么將會只有medhot3被執行
實現此效果。
http://jsbin.com/genagosoge/edit?html,output
如何獲取 DOM 計算后的樣式？
獲取樣式 getComputedStyle
使用getComputedStyle獲取元素計算后的樣式，不要通過 node.style.屬性 獲取
var node = document.querySelector('p')
var color = window.getComputedStyle(node).color
console.log(color)
寫一個函數，批量操作 css。
function css(node, styleObj){
//todo ..
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
function css(node, styleObj){
for(key in styleObj){
node.style[key] = styleObj[key]
}
}
css(document.body, {
'color': 'red',
'background-color': '#ccc'
})
列出DOM 元素選取的 API。
getElementById()
getElementById方法返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。這也是獲取一個元素最快的方法
var elem = document.getElementById("test");
getElementsByClassName()
getElementsByClassName方法返回一個類似數組的對象（HTMLCollection類型的對象），包括了所有class名字符合指定條件的元素（搜索范圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
var elements = document.getElementsByClassName('tab');
getElementsByClassName方法的參數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素。
document.getElementsByClassName('red test');
getElementsByTagName()
getElementsByTagName方法返回所有指定標簽的元素（搜索范圍包括本身）。返回值是一個HTMLCollection對象，也就是說，搜索結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document對象上調用，也可以在任何元素節點上調用。
var paras = document.getElementsByTagName("p");
上面代碼返回當前文檔的所有p元素節點。注意，getElementsByTagName方法會將參數轉為小寫后，再進行搜索。
getElementsByName()
getElementsByName方法用于選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的對象，不會實時反映元素的變化。
// 假定有一個表單是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
注意，在IE瀏覽器使用這個方法，會將沒有name屬性、但有同名id屬性的元素也返回，所以name和id屬性最好設為不一樣的值。
querySelector()
querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
querySelector方法無法選中CSS偽元素。
querySelectorAll()
querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList類型的對象。NodeList對象不是動態集合，所以元素節點的變化無法實時反映在返回結果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll方法的參數，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
上面代碼返回class屬性是note或alert的div元素
如何創建元素？如何添加元素？
創建：creatElement(name)
設置屬性：setAttribute(attr,value)
刪除屬性：removeAttribute(attr)
