1.查詢(xún)DOM元素
1.document.querySelector("選擇器")
? 查找到的是第一個(gè)元素
2.document.querySelectorAll("選擇器")
? 偽數(shù)組
3.id選擇器 document.getElementById("不需要加#");
4.通過(guò)類(lèi)選擇器查找document.getElementByClassName("div");
? 偽數(shù)組
5.通過(guò)元素名查找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? 里面放入? 首頁(yè)? 文字
? ? var nav = document.querySelector(".nav");
? ? var li = document.createElement("li");
? ? li.innerText = "首頁(yè)";
? ? nav.appendChild(li);
</script>
? <ul class="goods"></ul>
//商品goods
? ? var goods =document.querySelector(".goods");
? ? var goodsItem = document.createElement("li");
? ? goods.appendChild(goodsItem);
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對(duì)象
1.獲取HTML
功能
用js修改樣式
修改里面的內(nèi)容
添加事件
查詢(xún)標(biāo)簽
var d = document.querySelector("選擇器")
2.刪除HTML
清空標(biāo)簽/插入標(biāo)簽
xx.innerHTML = ""获搏;
3.替換HTML
創(chuàng)建日期對(duì)象
獲取當(dāng)前日期
var date = new Date();
new 通過(guò)類(lèi)名 創(chuàng)建對(duì)象的關(guān)鍵字
Date 日期類(lèi)
通過(guò)日期類(lèi)? -> 創(chuàng)建一個(gè)當(dāng)前的日期對(duì)象
日期
年
月
得加1
日
周
大寫(xiě)的M
時(shí)
分
小寫(xiě)的M
秒
毫秒
獲取將來(lái) 過(guò)去的時(shí)間(指定時(shí)間)
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
時(shí)間戳
1970年-某個(gè)時(shí)間的? 毫秒數(shù)
時(shí)間戳 轉(zhuǎn) 日期對(duì)象
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
日期對(duì)象 轉(zhuǎn) 時(shí)間戳
var date = new Date();
date.getTime();