1. 程式人生 > >關於選擇器(很早之前寫的)

關於選擇器(很早之前寫的)

log class rip not 常用 接下來 一個 query 選擇器

<div class="kaishi" id="aa">1</div>
<a href="" id="ab">2</a>
<div id="ac" name="nihao">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
<div>e</div>
</div>
<script type="text/javascript">
// 獲取元素
var a=document.getElementById("aa") //用id獲取
console.log(a)
var b=document.getElementsByClassName("kaishi")//這個獲取的是一個類數組類對象 因為是個數組所以獲取元素的時候要加下標號0
console.log(b[0])
var c=document.getElementsByName("nihao")//這個不經常用 必須屬性叫name 通過取它的值才能獲取到元素 必須也要加下標0跟上面那個一樣解釋
console.log(c[0])


// 接下來這兩個一般是配合用的 下面主要是針對id名字是ac的那個盒子
var d=document.getElementById("ac") //這個獲取的是父級及其下的所有子集元素 但是並不能幹什麽
console.log(d)
var e=d.getElementsByTagName("div")//這個獲取的就是notelist 節點數組 以節點數組名稱顯示 你看下面的打印
console.log(e)
//上面這兩個是最好用的也是最實用的 我在路上跟你說過這個 這個時候就可以體驗for的方便了 我給你寫一個for的 就跟上面這兩個有關
var arr=["red","blue","black","yellow","pink"]
for(var i=0;i<e.length;i++){
e[i].style.background=arr[i]
}//動態添加屬性

var h=document.querySelector(".kaishi") //路上跟你說的那個H5特別好用的一個js選擇器
var h1=document.querySelector("#aa") //路上跟你說的那個H5特別好用的一個js選擇器
console.log(h)
console.log(h1)

</script>

關於選擇器(很早之前寫的)