JS DOM window.document对象
一、获取对象：
获取id：document.getElementByid("对应的id");只能返回一个对象。因为id是唯一的
获取classs：document.getElementsByClassName("对应的class")；很多个取到的事数组就算是一个也是数组。可以用索引取
获取Name:document.getElementsByName("对应的Name");和class一样
获取元素：document.getElementsByTagName("对应的元素");和class一样
二、操作对象属性：
1、添加属性：
对象.setAttribute("属性名", "属性名的值");
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .di { background-color:red; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="按钮1"id="btn1";/> </div> </form> </body> </html> <script> document.getElementById("btn1").onclick=function(){//点击btn1发生 var oBtn1 = document.getElementById("btn1");//获取到btn1返回给oBtn1 oBtn1.setAttribute("disabled", "disabled");//点击btn1给按钮添加disabled="disabled";括号内（“属性名”，“属性名的值”） oBtn1.setAttribute("class", "d1");//点击btn1给按钮添加class="d1"; } </script>
2、移除属性：
对象.removeAttribute("要移除的属性名");
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .di { background-color:red; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="按钮2"id="btn2" disabled="disabled";/>//默认不可用 <input type="button" value="按钮1"id="btn1" /></div> </form> </body> </html> <script> document.getElementById("btn1").onclick=function(){//点击btn1发生 var oBtn2 = document.getElementById("btn2");//获取到按钮2的对象 oBtn2.removeAttribute("disabled");//移除按钮2的disabled让按钮2 可用 只写属性名连属性值一起去掉 } </script>
3、获取属性的值：
对象.getAttribute("属性名")
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .di { background-color:red; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" value="按钮2"id="btn2" disabled="disabled";/>//默认不可用 <input type="button" value="按钮1"id="btn1" /></div> </form> </body> </html> <script> document.getElementById("btn1").onclick=function(){//点击btn1发生 var oBtn2 = document.getElementById("btn2");//获取到按钮2的对象 oBtn2.removeAttribute("disabled");//移除按钮2的disabled让按钮2 可用 只写属性名连属性值一起去掉 alert(oBtn2.getAttribute("disabled"));//获取按钮2里面的disabled的属性值并弹出来 } </script>
三、操作对象内容
1、针对普通元素
（1）添加内容
对象.innerHTML=“” /对象.innerText ="";如果添加的事元素TEXT会原封不动的读出来/HTML会被解析出来只能加一个 追加的话+=
（2）移除内容
对象.innerHTML=“” /对象.innerText ="";等于空
（3）获取内容
对象.innerHTML/对象.innerText 如果是元素HTML会把元素也获取出来TEXT只把元素之间的内容获取出来
2、针对表单元素
（1）添加内容
对象.value="内容";
（2）移除内容
对象.value="";
（3）获取内容
对象.value
四、操作对象样式
1、添加 样式
对象.style.width/height/backgroundColor=“值”；
2、获取样式
对象.style.width/height/backgroundColor 只能获取内嵌的样式
3、实时获取
对象.offsetHeight
五、操作相关元素
获取同辈的下一个/上一个
对象.nextSibling/previousSibling 换行和空格会被获取出来
获取父辈
对象.parentNode.getAttribut("id")获取父级的的id
获取子级
对象.childNodes.length获取一共几个子级
对象.childNodes.[0].getAttribut("id")
六、创建删除元素
var a = document.createElement("a");//创建一个a标签 a.innerText = "百度"; document.getElementById("div1").appendChild(a)//获取到div1 将创建的a标签添加到div1的子级 a.remove;//删除a标签 找到父级才能删除
七、事件
常用
· 对象.onclick 单击
对象.onmouseover/onmouseout 鼠标移入/移除
对象.onkeyup 按键抬起
对象.onfous/onblur 得到/失去焦点
不常用
对象.ondblclick 双击
对象.onmousemove 鼠标移动
对象.onchange
对象.onkeydown 按键按下
对象.onkeypress
八、正则表达式
/正则/.test(要对比的字符串)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .di { background-color:red; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="text"id="txt1" /> <span id="sp1" style="color:red"></span> </div> </form> </body> </html> <script> document.getElementById("txt1").onkeyup = function () { var osp1 = document.getElementById("sp1"); if (/正则表达式/.test(this, value)) { sp1.innerHTML = "正确"; sp1.style.color = "green"; } else { sp1.innerHTML = "格式输入有误"; sp1.style.color = "red"; } } </script>
