一、DOM 分类
DOM 分为 window 对象 和 document 对象
二、函数调用
1 自己封装的函数 调用只写函数名（）；数学函数 math 或 绝对值 调用 写 Math.abs()
2 函数和属性的调用（不一样）例如:
函数调用直接写函数名 window.hanshu() ; 属性调用直接写属性名字就可以 windows.shuxin() ;
三、什么是事件
事件就事先设置好的程序，被触发
document对象
1.找元素的方法
1.通过id名找
var d1 = document.getElementById("d1");
alert(d1);
2.通过class名找
var d2 = document.getElementsByClassName("d2");
alert(d2[1]);
3.标签名找
var d3 = document.getElementsByTagName("div");
alert(d3[0]);
4.表单元素
var d4 = document.getElementsByName("d4");
alert(d4[0]);
操作
操作内容
1.获取内容
var d1 = document.getElementById("d1");
alert(d1.innerText);
2.修改内容
d1.innerText = "<u>这是修改html代码</u>";
alert(d1.innerHTML);
d1.innerHTML = "<u>这是修改html代码</u>";
操作属性
1.获取属性
var d3 = document.getElementById("d3");
alert(d3.getAttribute("id"));
2.添加属性
d3.setAttribute("sd","1");
3.移除属性
d3.removeAttribute("size");
操作样式
var d1 = document.getElementById("d1");
1.获取样式
alert(d1.style.color);
2.修改样式
d1.style.color = "red";
Window对象
1 <body> 2 ?????????3 ????????<div style="width:200px; height:300px; background-color:#36F;" ondblclick="Show(this)"> 4 ????????????DOM 5 ????????????window对象 6 ????????????document对象 7 ????????????函数调用：自己封装的函数调用只写函数名();数学函数Math ??绝对值 ?怎么调用：Math.abs() 8 ????????????函数和属性的调用: 9 ????????????window.hanshuming(); ?函数10 ????????????window.opener; ??属性11 ????????</div>12 ????????<input type="checkbox"/>13 ????????<input type="button" value="按钮"/> 14 ????????<select onchange="Show(this)">15 ????????????<option>111</option>16 ????????????<option>222</option>17 ????????????<option>333</option>18 ????????</select>19 ????????load(sender,e) ?sender:触发源（谁触发的事件） e：事件内容20 ????????{21 ????????????22 ????????}23 ????????<br />24 ????????<input type="button" value="打开窗口" onclick="Dakai()"/>25 ????????<input type="button" value="关闭窗口" onclick="Guan()" />26 ????????<input type="button" value="清除间隔" onclick="Qing()"/>27 ????????<input type="button" value="前进" onclick="Qian()" />28 ????????<input type="button" ?value="打开" onclick="D()"/>29 ????</body>30 ????<script type="text/javascript"> ???31 ????????function Qian()32 ????????{33 ????????????window.history.forward();34 ????????} ?????????????????????????????????????35 ????????function Show(i)36 ????????{37 ????????????alert(i+"这是一个事件"); ???????38 ????????}39 ????????//Show(1,2);40 ????????var d;41 ????????function Dakai()42 ????????{43 ????????????if(d==null)44 ????????????{45 ????????????????d = window.open("1.html","_self","width=300 height=200"); ???????46 ????????????}47 ????????????48 ????????}49 ????????50 ????????function Guan()51 ????????{52 ????????????d.close(); ???53 ????????}54 ????????//alert("sss");55 ????????var q = window.setInterval("Jan()",2000);56 ????????function Jan()57 ????????{58 ????????????alert("这是间隔"); ???59 ????????}60 ????????61 ????????function Qing()62 ????????{63 ????????????window.clearInterval(q); ???64 ????????}65 ????????66 ????????function D()67 ????????{68 ????????????window.location.href = "http://www.baidu.com"; ???69 ????????}70 ????</script>
JS DOM 对象
原文地址：https://www.cnblogs.com/wangxiao233/p/8341079.html