style屬性
<style type="text/css">
.box{
position: absolute;
z-index: 1;/*元素層級,只能在絕對定位元素上生效*/
}
</style>
<script>
var box = document.getElementsByClassName("box")[0];
//style只能和行內(nèi)樣式進行交互光涂，命名規(guī)則是駝峰，值都是字符串
document.getElementsByTagName("button")[0].onclick = function () {
box.style.backgroundColor = (box.style.backgroundColor === "red" ? "rebeccapurple" : "red");
};
//cssText:字符串形式的樣式,把行內(nèi)樣式按照字符串輸出
console.log(box.style.cssText);//"width: 100px;background-color: rebeccapurple; height: 100px;"
//設(shè)置
box.style.cssText = "width: 100px;background-color: rebeccapurple; height: 100px;"
</script>
DOM元素的創(chuàng)建方式總結(jié)
第一種創(chuàng)建方式民褂，document.write,可以識別標(biāo)簽，在script中寫html和css,跟script寫的位置有關(guān)系。script寫哪就創(chuàng)建在哪弧关，不常用，容易覆蓋原來的頁面
document.write("<li>我是document.write創(chuàng)建的</li>");
第二種innerHTML,也可以識別標(biāo)簽,用的比較多唤锉，綁定屬性和內(nèi)容比較方便,節(jié)點嵌套創(chuàng)建用它比較方便
var li3 = document.getElementsByTagName("li")[0];
li3.innerHTML += "<li>我是innerHTML創(chuàng)建的</li>";
第三種：利用domAPI創(chuàng)建元素梯醒，也是用的比較多的，創(chuàng)建指定數(shù)量的時候一般用它
var li4 = document.createElement("li");
li4.innerHTML = "我是createElement創(chuàng)建出來的";
//在父元素的最后添加
li3.appendChild(li4);
//指定位置添加
var li5 = li4.cloneNode(false);
li5.innerHTML = "我是cloneNode創(chuàng)建出來的"
li3.insertBefore(li5,li4);//插入到哪個元素的前面
window對象
window是BOM的頂級對象腌紧，通常情況下可以省略
window.alert("11");
window.prompt("111");
//成員變量也是window的屬性
var aa = "1";
console.log(aa === window.aa);
//自定義函數(shù)也是window的一個方法
function aaa() {
console.log("111");
}
window.aaa();
open,close
//window.open(地址茸习，是否開新窗口，新窗口參數(shù))
var a1 = document.getElementsByTagName("a")[0];
var a2 = document.getElementsByTagName("a")[1];
a1.onclick = function () {
var json = {"name":"helloworld","fullscreen":"no","location":"no","width":"100px","height":"100px","top":"100px","left":"100px"};
window.open("http://www.jd.com","_self",json);
// featurse：屬性控制字符串壁肋，在此控制窗口的各種屬性号胚，屬性之間以逗號隔開。
// fullscreen= { yes/no/1/0 } 是否全屏浸遗，默認(rèn)no
// channelmode= { yes/no/1/0 } 是否顯示頻道欄猫胁，默認(rèn)no
// toolbar= { yes/no/1/0 } 是否顯示工具條，默認(rèn)no
// location= { yes/no/1/0 } 是否顯示地址欄跛锌，默認(rèn)no
// directories = { yes/no/1/0 } 是否顯示轉(zhuǎn)向按鈕弃秆，默認(rèn)no
// status= { yes/no/1/0 } 是否顯示窗口狀態(tài)條，默認(rèn)no
// menubar= { yes/no/1/0 } 是否顯示菜單髓帽，默認(rèn)no
// scrollbars= { yes/no/1/0 } 是否顯示滾動條菠赚，默認(rèn)yes
// resizable= { yes/no/1/0 } 是否窗口可調(diào)整大小，默認(rèn)no
// width=number 窗口寬度（像素單位）
// height=number 窗口高度（像素單位）
// top=number 窗口離屏幕頂部距離（像素單位）
// left=number 窗口離屏幕左邊距離（像素單位）
}
//window.close關(guān)閉當(dāng)前頁面
a2.onclick = function () {
window.close();
}
location
//location,做頁面跳轉(zhuǎn)
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.;
}
// console.log(location.href ) //
// console.log(location.hash ) // 返回url中#后面的內(nèi)容郑藏，包含#
// console.log(location.host ) // 主機名衡查，包括端口
// console.log(location.hostname) // 主機名
// console.log(location.pathname) // url中的路徑部分
// console.log(location.protocol) // 協(xié)議 一般是http、https
// console.log(location.search ) // 查詢字符串
navigator
//navigator
console.log(navigator.userAgent);//瀏覽器支持的系統(tǒng)
console.log(navigator.platform);//系統(tǒng)
history
//history,歷史記錄管理
history.go(1);//前進 history.forwardo()也是前進
history.go(-1);//后退 history.back()也是回退
history.go(0);//刷新
定時器
setInterval,循環(huán)定時器必盖，周而復(fù)始的執(zhí)行
setTimeout拌牲，炸彈定時器，用完以后立即報廢歌粥，只執(zhí)行一次
定義方法
var a = 0;
//定義方法1匿名函數(shù)塌忽，一般情況下都用這個
setInterval(function () {
console.log(a++);
},1000);
//定義方法2函數(shù)名
setInterval(aaa,1000);
function aaa() {
console.log(1);
}
//定義方法3
setInterval("sss(111)",1000);
function sss(ssss) {
console.log(ssss);
}
銷毀定時器
//setInterval的返回值就是定時器的名字
var num = 1;
var timer = null;
time = setInterval(function () {
console.log(num++);
if (num > 10) {
clearInterval(timer);
}
},500);
綁定事件的第二種方法
第一種綁定事件的方法，當(dāng)事件被重復(fù)綁定的時候失驶，會被覆蓋掉
var button = document.getElementsByTagName("button")[0];
//onclick事件綁定會被覆蓋掉
button.onclick = function () {
console.log("12345");
}
button.onclick = function () {
console.log("67890");
}
事件綁定第二種方法:事件監(jiān)聽器,原事件被執(zhí)行的時候土居，后面的事件照樣被執(zhí)行，不會被覆蓋(更適合團隊開發(fā))
//1.事件源去調(diào)用
//2.參數(shù)1是不帶on的觸發(fā)事件
//3.參數(shù)2是事件名(執(zhí)行函數(shù))
//4.參數(shù)3是事件名(捕獲或者冒泡)
button.addEventListener("click",fn1);
button.addEventListener("click",fn2);
button.addEventListener("click",fn3);
function fn1() {
console.log("12345");
}
function fn2() {
console.log("67890");
}
function fn3() {
console.log("123456789");
}
addEventListener實現(xiàn)原理
/**
*
* @param type 事件名
* @param fn 執(zhí)行函數(shù)
* @param element 給哪個元素綁定
*/
function customAddEventListener(type,fn,element) {
var str = "on" + type;
//執(zhí)行方法的時候就先判斷事件是否被綁定完，然后在去綁定装盯，就能判斷之前的事件是否被綁定過
var oldEvent = element[str];
element[str] = function () {
//不能直接調(diào)用坷虑，因為還不知道這個元素之前還有沒有綁定同樣的事件
//進行判斷，如果有就先把之前的執(zhí)行完再執(zhí)行埂奈，如果沒有接直接執(zhí)行
//如果沒有被定義過事件該事件源的該事件屬性應(yīng)該是null對應(yīng)的boolean值是false
//如果已經(jīng)定義過事件該事件源的該事件屬性應(yīng)該是function本身對應(yīng)的boolean值是true
if (oldEvent) {
oldEvent();
}
fn();
};
}
