1.查詢DOM元素
1.document.querySelector("選擇器")
? 查找到的是第一個(gè)元素
2.document.querySelectorAll("選擇器")
? 偽數(shù)組
3.id選擇器 document.getElementById("不需要加#");
4.通過類選擇器查找document.getElementByClassName("div");
? 偽數(shù)組
5.通過元素名查找document.getElementByTagName("div");
? 偽數(shù)組
回顧選擇器
基礎(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
注意分清交集和后代
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)汉形；
創(chuàng)建日期對象
獲取當(dāng)前日期
var date = new Date();
new 通過類名 創(chuàng)建對象的關(guān)鍵字
Date 日期類
通過日期類? -> 創(chuàng)建一個(gè)當(dāng)前的日期對象
日期
年
月
得加1
日
周
大寫的M
時(shí)
分
小寫的M
秒
毫秒
獲取將來 過去的時(shí)間（指定時(shí)間）
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
時(shí)間戳
1970年-某個(gè)時(shí)間的? 毫秒數(shù)
時(shí)間戳 轉(zhuǎn) 日期對象
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
日期對象 轉(zhuǎn) 時(shí)間戳
var date = new Date();
date.getTime();JS操作HTML
1.創(chuàng)建 HTML
? document.createElement("標(biāo)簽名");
? 如
? var p = document.createElement("p");
? 屬性
? 在js也同樣可以獲取或設(shè)置屬性
? 如
? ? div.style.opacity = 0.6;
? ? var image = document.createElement("img");
image.src = "https://www.baidu.com/img/dong_f17b19f600dbf0bfc9b8bed5836f50be.gif";
? < img? src="1.jpg">
? 注意：
? 創(chuàng)建完得標(biāo)簽 需要放到指定 才能顯示
? ? 步驟
? ? 1.創(chuàng)建HTML標(biāo)簽
? ? ? var image = document.createElement("img");
? ? 2.放到某個(gè)容器
? ? ? document.body.appendChild(image);
? ? ? 拼接dom對象
2.獲取HTML
? 功能
? 用js修改樣式
? 修改里面的內(nèi)容
? 添加事件
? 查詢標(biāo)簽
? var d = document.querySelector("選擇器")
3.刪除HTML
? 清空標(biāo)簽/插入標(biāo)簽
? xx.innerHTML = ""；
1.窗口對象
window窗口包含的部分
瀏覽器可視的范圍
1.導(dǎo)航
2.歷史記錄
3.屏幕大小
4.位置
窗口對象? 是Window的實(shí)例對象
注意：
1.定義的全局變量
是定義到window對象上面的
可以通過window.xx訪問
2.在最外面定義的函數(shù)
是定義到了window對象上面
可以通過window.xx訪問
this 就表示-> window對象
尺寸
window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動條)
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動條)
如果IE 5、6、7岭埠、8
document.documentElement.clientHeight
document.documentElement.clientWidth
事件
resize
屏幕尺寸發(fā)生改變的時(shí)候調(diào)用
load
等窗口里的資源? 加載完成的時(shí)候調(diào)用
