style属性
<style type="text/css">
.box{
position: absolute;
z-index: 1;/*元素层级,只能在绝对定位元素上生效*/
}
</style>
<script>
var box = document.getElementsByClassName("box")[0];
//style只能和行内样式进行交互，命名规则是驼峰，值都是字符串
document.getElementsByTagName("button")[0].onclick = function () {
box.style.backgroundColor = (box.style.backgroundColor === "red" ? "rebeccapurple" : "red");
};
//cssText:字符串形式的样式,把行内样式按照字符串输出
console.log(box.style.cssText);//"width: 100px;background-color: rebeccapurple; height: 100px;"
//设置
box.style.cssText = "width: 100px;background-color: rebeccapurple; height: 100px;"
</script>
DOM元素的创建方式总结
第一种创建方式，document.write,可以识别标签，在script中写html和css,跟script写的位置有关系。script写哪就创建在哪，不常用，容易覆盖原来的页面
document.write("<li>我是document.write创建的</li>");
第二种innerHTML,也可以识别标签,用的比较多，绑定属性和内容比较方便,节点嵌套创建用它比较方便
var li3 = document.getElementsByTagName("li")[0];
li3.innerHTML += "<li>我是innerHTML创建的</li>";
第三种：利用domAPI创建元素，也是用的比较多的，创建指定数量的时候一般用它
var li4 = document.createElement("li");
li4.innerHTML = "我是createElement创建出来的";
//在父元素的最后添加
li3.appendChild(li4);
//指定位置添加
var li5 = li4.cloneNode(false);
li5.innerHTML = "我是cloneNode创建出来的"
li3.insertBefore(li5,li4);//插入到哪个元素的前面
window对象
window是BOM的顶级对象，通常情况下可以省略
window.alert("11");
window.prompt("111");
//成员变量也是window的属性
var aa = "1";
console.log(aa === window.aa);
//自定义函数也是window的一个方法
function aaa() {
console.log("111");
}
window.aaa();
open,close
//window.open(地址，是否开新窗口，新窗口参数)
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 } 是否全屏，默认no
// channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
// toolbar= { yes/no/1/0 } 是否显示工具条，默认no
// location= { yes/no/1/0 } 是否显示地址栏，默认no
// directories = { yes/no/1/0 } 是否显示转向按钮，默认no
// status= { yes/no/1/0 } 是否显示窗口状态条，默认no
// menubar= { yes/no/1/0 } 是否显示菜单，默认no
// scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
// resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
// width=number 窗口宽度（像素单位）
// height=number 窗口高度（像素单位）
// top=number 窗口离屏幕顶部距离（像素单位）
// left=number 窗口离屏幕左边距离（像素单位）
}
//window.close关闭当前页面
a2.onclick = function () {
window.close();
}
location
//location,做页面跳转
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "https://www.baidu.com";
}
// console.log(location.href ) //
// console.log(location.hash ) // 返回url中#后面的内容，包含#
// console.log(location.host ) // 主机名，包括端口
// console.log(location.hostname) // 主机名
// console.log(location.pathname) // url中的路径部分
// console.log(location.protocol) // 协议 一般是http、https
// console.log(location.search ) // 查询字符串
navigator
//navigator
console.log(navigator.userAgent);//浏览器支持的系统
console.log(navigator.platform);//系统
history
//history,历史记录管理
history.go(1);//前进 history.forwardo()也是前进
history.go(-1);//后退 history.back()也是回退
history.go(0);//刷新
定时器
setInterval,循环定时器，周而复始的执行
setTimeout，炸弹定时器，用完以后立即报废，只执行一次
定义方法
var a = 0;
//定义方法1匿名函数，一般情况下都用这个
setInterval(function () {
console.log(a++);
},1000);
//定义方法2函数名
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);
绑定事件的第二种方法
第一种绑定事件的方法，当事件被重复绑定的时候，会被覆盖掉
var button = document.getElementsByTagName("button")[0];
//onclick事件绑定会被覆盖掉
button.onclick = function () {
console.log("12345");
}
button.onclick = function () {
console.log("67890");
}
事件绑定第二种方法:事件监听器,原事件被执行的时候，后面的事件照样被执行，不会被覆盖(更适合团队开发)
//1.事件源去调用
//2.参数1是不带on的触发事件
//3.参数2是事件名(执行函数)
//4.参数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实现原理
/**
*
* @param type 事件名
* @param fn 执行函数
* @param element 给哪个元素绑定
*/
function customAddEventListener(type,fn,element) {
var str = "on" + type;
//执行方法的时候就先判断事件是否被绑定完，然后在去绑定，就能判断之前的事件是否被绑定过
var oldEvent = element[str];
element[str] = function () {
//不能直接调用，因为还不知道这个元素之前还有没有绑定同样的事件
//进行判断，如果有就先把之前的执行完再执行，如果没有接直接执行
//如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false
//如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true
if (oldEvent) {
oldEvent();
}
fn();
};
}
