一、获取对象:
获取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)移除内容
等于空
(3)获取内容
如果是元素HTML会把元素也获取出来TEXT只把元素之间的内容获取出来
2、针对表单元素
(1)添加内容
对象.value="内容";
(2)移除内容
对象.value="";
(3)获取内容
对象.value
四、操作对象样式
1、添加 样式
对象.style.width/height/backgroundColor=“值”;
2、获取样式
对象.style.width/height/backgroundColor 只能获取内嵌的样式
3、实时获取
对象.offsetHeight
五、操作相关元素
获取同辈的下一个/上一个
换行和空格会被获取出来
获取父辈
获取父级的的id
获取子级
获取一共几个子级
对象.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>