angular.module("APP",[])
.directive("testDw",function () {
return{
restrict:"E",
scope:"=",
template: "<div class='a'><div class='b'> 123344</div></div>",
link:function (scope,element,attrs) {
console.log(element.length); //1
console.log(element); //2
console.log(element[0]); //3
console.log(element[0].firstChild); //4
console.log(element.children("div")); //5
console.log(element.children("div")[0]); //6
console.log(element[0].getElementsByClassName("a")); //7
element[0].getElementsByClassName("a")[0].style.backgroundColor="black";
element[0].firstChild.style.backgroundColor="red";
}
}
});
以上為指令中的代碼
<!DOCTYPE html> <html lang="en" ng-app="APP"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body > <div><test-dw></test-dw></div> <script type="text/javascript" src="angular.min.js"></script> <script type="text/javascript" src="app3.js"></script> </body> </html>
以上為html的代碼
結果：
1.結果是 length=1，可以看出element是一個有部分jquery dom對象屬性的dom對象，且有數據特性；
2.從結果可以看出指向的是[test-dw]，從圖中可以看出element[0]=<test-dw>,length=1,_proto_為對象的內部原型（每個對象都會在其內部初始化一個屬性，就是_proto_）
3.從結果可以看出 element[0]=<test-dw>
4.element[0].firstchild 為div塊
5.element[0].children("div")不是一個div的具體塊，它也和element一樣是一個具有一個部分jquery dom對象屬性的dom對象，且具有數據特性
6.element[0].children("div")[0]這個才是到了具體的div塊 （它和element[0].firstchild一樣，可以對比下）
7.注意：結果和5不一樣，7是用原生的js寫的，所以內部原型不同。