回顧選擇器
基礎(chǔ)選擇器
1.元素選擇器
元素名(標(biāo)簽名)
如：
h1
div
a
span
input
form
option
select
2.id選擇器
在html里面? 使用id=“cc”
使用#來查找 id選擇器
如：#cc
3.類選擇器
在HTML里面使用class設(shè)置
在CSS和JS里面 查找 使用.類選擇器的名字
如：.haha
如：<div class = "haha"></div>
后代選擇器
只要是 某個(gè)元素中的 子元素? 都可以選擇上
后代選擇器是通過空格隔開的? ? 如：.xx .title{}、div a{}、#ff .vv{}
兩個(gè)選擇器之間是有空格的
子類選擇器
只能選擇直接子元素
父元素的選擇器>子元素的選擇器
如：
.item>p
交集選擇器
div.top
都包含
p.top
并集選擇器
html,body
.top,.nav
屬性選擇器
input[type=password]
選擇器名[屬性名=屬性值]
子類第幾個(gè)元素
：first-child
：nth-child
注意分清交集和后代
1.查詢DOM元素
1.document.querySelector("選擇器")
? 查找到的是第一個(gè)元素
2.document.querySelectorAll("選擇器")
? 偽數(shù)組
3.id選擇器 document.getElementById("不需要加#");
4.通過類選擇器查找document.getElementByClassName("div");
? 偽數(shù)組
5.通過元素名查找document.getElementByTagName("div");
? 偽數(shù)組
2.創(chuàng)建DOM元素
document.createElement("標(biāo)簽的名字")
步驟
1.創(chuàng)建dom元素
var 變量名= document.createElement("標(biāo)簽的名字")；
2.放內(nèi)容
dom.innerText = "wenben"
放文本
dom.innerHTML = "<div>< img src="" ></div>"
放HTML里的字符串
dom.src="";
dom.appendChild(子元素)；
dom 不一定是父元素
3.放到父元素中
父元素.appendChild(dom);
<ul class="nav"></ul>
<script>
//在nav里面? 創(chuàng)建一個(gè)li? 里面放入? 首頁? 文字
? ? var nav = document.querySelector(".nav");
? ? var li = document.createElement("li");
? ? li.innerText = "首頁";
? ? nav.appendChild(li);
</script>
<ul class="goods"></ul>
//商品goods
? ? var goods =document.querySelector(".goods");
? ? var goodsItem = document.createElement("li");
? ? goods.appendChild(goodsItem);
