目录
1.DOM:Document Object Model 文档对象模型
概念:将标记语言文档的各个组成部分 封装为对象
组成:
Document:文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象
2. Document:文档对象
获取:window.document
document 中 body属性 可以获取body标签对象
document.body.bgColor = "red";
title 属性获取文档标题
var bt = document.title;
获取文档最后一次修改时间
var rq=document.lastModified;
URL 属性 获取地址栏中的地址
方法:
获取Element对象
getElementById():通过id属性值获取唯一的元素
getElementsByTagName():通过标签名称获取元素对象数组
getElementsByName():通过name属性值获取元素对象数组
getElementsByClassName():通过class属性值获取元素对象数组
根据css的选择器语法来选择的,获取的是第一个是个单数。
var aa=document.querySelector(".myclass");
alert(aa);
//根据css的选择器语法来选择的,获取的是多个
var arr=document.querySelectorAll(".myclass");
alert(arr.length);
创建其他对象
createElement:创建元素对象
createAttribute:创建属性对象
createComment:创建注释对象
createTextNode:创建文本对象
给属性对象设置值
font1.setAttribute('color','yellow');
bd.remove(); 删除自己
bd.removeChild(div); //移除子元素
//根据属性名来移除标签上的属性
//div.removeAttribute("align");
//移除属性对象。你传入的是一个属性对象
//div.removeAttributeNode(attr);
//站在父元素的角度,替换子元素,值1:新的元素,值2:是要替换的旧元素。
bd.replaceChild(h4,h);
//站在父标签的角度,在这个h1标签对象的前面插入h5这个标签对象。
bd.insertBefore(h5,h1);
例子:
var div4 = window.document.createElement(“div”);
var text1 = window.document.createTextNode(“我是第四个div”);
var v = div4.appendChild(text1);
document.getElementsByTagName(“body”)[0].appendChild(div4);
Element:元素对象
* innerHTML属性:获取或设置 元素的 子内容
*innerTEXT属性:获取标签之间的文本内容
js中注册监听的方式:
事件
概念:
事件:一件事
事件源:事件发生的组件。
监听器:一个对象。当事件源上发生了事件,就执行对象中的某些方法
注册监听:将监听器绑定到事件源上,监听事件的发生
1. 在定义标签时,添加 事件名称属性。属性值是js代码
js代码会被自动封装到一个function函数的方法体中
例子:hehe
2. 通过js获取元素对象,再添加事件。
例子:
//1.获取元素对象
var input = document.getElementById("username");
//2.注册监听
input.onclick = function(){
//alert("hehe");
}
3. 通过 addEventListener() 方法 来添加事件
语法:document.getElementById("myBtn").addEventListener("click",事件处理函数);
//移除事件 值1:事件名 值2:事件处理函数
document.getElementById("myBtn").removeEventListener('click',show);
js中事件的种类:
焦点事件:针对表单
onfocus 元素获得焦点。
onblur 元素失去焦点
点击事件:
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
键盘事件:
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
通过事件对象event中的keyCode属性,可以获取键盘某个键的键码 其实就是ASCII码表中对按键的编码
e.keyCode
鼠标事件:
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
鼠标按下时,通过事件对象 event中的属性 button 或 which 可以获取鼠标按键的编号。
e.button 事件对象中的 button属性可以获取鼠标按键的编号
e.which 也可以获取鼠标的按键编号 1 左键 2滚轮 3右键
e.button 也可以获取鼠标的按键编号 0 左键 1滚轮 2右键
表单事件:
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
oninput 事件 当你往表单中输入内容时就触发
加载与卸载事件
onload 一张页面或一幅图像完成加载。
onunload 用户退出页面。 其他浏览器不支持 IE支持
其他事件:
针对表单
onchange 域的内容被改变。 比如下拉框
onselect 文本被选中。
JS事件对象 event中的属性和功能
属性: currentTarget: 获取的是绑定了该事件的元素对象
target : 获取的是触发了该事件的元素对象
type: 获取事件类型
keyCode 当绑定了键盘事件,可以从事件对象中获取按键的键码(ASCII码)
which/button 当绑定了鼠标事件,可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键
方法:
e.stopPropagation() 阻止事件冒泡
e.preventDefault(); 阻止元素的默认行为
document文档对象中的方法和属性代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的网页</title>
</head>
<body>
</body>
</html>
<!-- 当我们操作DOM时, script标签放在文档下面,防止,DOM元素因为加载顺序,而获取不到 -->
<script type="text/javascript">
// Document 对象
// 每个载入浏览器的 HTML 文档都会成为 Document 对象。
//获取文档对象,通过 window对象的document属性来获取文档对象
var doc = window.document;
//文档对象中的属性和方法
//获取body标签对象
var bd = doc.body;
alert(bd);
//获取文档的修改时间
var time = window.document.lastModified;
alert(time);
//设置或获取网页的标题
document.title = "我的新标题";
var t = document.title;
alert(t);
//location.href
//获取或设置地址栏中的内容
var url=document.URL;
alert(url);
</script>
文档对象中的方法代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//文档对象中的方法
//write() 向文档写 HTML 表达式 或 JavaScript 代码。
document.write("aaaa");
document.write("<h1>阿三发射点发射点发</h1>")
//获取body标签对象
var bd=document.body;
//设置标签的自带属性值
//bd.bgColor="red";
document.onclick=function(){
//随机换背景颜色
var a=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
var c=Math.floor(Math.random()*255);
//设置标签的自带属性值
//bd.bgColor="rgb("+a+","+b+","+c+")";
//设置标签的css样式
bd.style.backgroundColor="rgb("+a+","+b+","+c+")";
}
</script>
</html>
获取标签对象代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body id="bd">
<h1 id="myh1">asdfasdfasdfasdfasdfasdf</h1>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
<h2 class="myh2">2222222</h2>
</body>
<!-- DOM操作时,script放到文档下面,防止标签对象获取不到 -->
<script type="text/javascript">
//通过id获取单个的标签对象
var myh1 = window.document.getElementById("myh1");
alert(myh1);
//获取body标签对象
var bd = document.body;
var mybd = document.getElementById("bd");
alert(bd);
alert(mybd);
alert(bd == mybd);
//通过class属性值,获取多个标签对象的数组
var h2Arr = document.getElementsByClassName("myh2");
for (let i = 0; i < h2Arr.length; i++) {
if (i % 2 == 0) {
h2Arr[i].style.background = "red";
} else {
h2Arr[i].style.background = "yellow";
}
}
</script>
</html>
获取标签对象的方法代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<h1>111111</h1>
<input type="" name="username" id="" value="" />
<input type="" name="password" id="" value="" />
<input type="radio" name="sex" id="" value="1" />
<input type="radio" name="sex" id="" value="0" />
</body>
<script type="text/javascript">
//通过标签名来获取标签对象的数组
var myh1=document.getElementsByTagName("h1");
for(let i=0;i<myh1.length;i++){
if(i%2==0){
myh1[i].style.background="red";
}else{
myh1[i].style.background="blue";
}
}
//针对input标签的获取方法,根据input标签的 name属性值获取,返回的是数组
var objArr=document.getElementsByName("username");
var obj=objArr[0];
alert(obj);
var objArr2=document.getElementsByName("sex");
var obj3=objArr2[0];
var obj4=objArr2[1];
alert(obj3);
alert(obj4);
</script>
</html>
获取标签对象新增方法代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh1">11111111111111111111111111</h1>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
<h2 class="myh2">2222</h2>
</body>
<script type="text/javascript">
//h5 新增的获取标签对象的方法
var h1=document.querySelector("#myh1"); //根据css选择器来获取
h1.style.color="red";
//.querySelector()即便你通过类选择器,默认选择的是第一个 .myh2
var myh2=document.querySelector(".myh2");
myh2.style.color="blue";
//通过类选择器选择多个,使用下面的
var myh2s=document.querySelectorAll(".myh2");
myh2s[1].style.color="red";
myh2s[2].style.color="blue";
myh2s[myh2s.length-1].style.color="pink";
</script>
</html>
标签对象的两个属性代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh1">
标签之间的文本
</h1>
<h2 id="myh2">
<span>标签啊手动阀手动阀十分</span>
</h2>
</body>
<script type="text/javascript">
var myh1 = document.getElementById("myh1");
//设置标签之间的文本
myh1.innerText += "新的文本" //+= 追加设置
//获取标签之间的文本
var text = myh1.innerText;
alert(text);
/* //innerHTML 设置或获取标签之间的内容,包括子标签
var myh2 = document.getElementById("myh2");
//innerHTML 会转义HTML标签
myh2.innerHTML="<s>阿三发射点发色</s>"
//var text2 = myh2.innerHTML;
//alert(text2); */
</script>
</html>
动态的创建DOM元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
//动态的创建Dom元素
//创建标签对象
var myDiv=document.createElement("div");
//获取body标签对象
var bd=document.body;
//站在父标签的角度设置子元素
bd.appendChild(myDiv);
//创建文本对象
var text=document.createTextNode("这是一行文本");
myDiv.appendChild(text);
//创建属性对象
var attr=document.createAttribute("style");
//设置属性的值
attr.value="color:red;font-size:25px";
//给标签设置属性读写
myDiv.setAttributeNode(attr);
//给标签设置属性,另一个方法 参数,属性名 属性值
myDiv.setAttribute("id","d1");
//创建注释对象
var comm=document.createComment("这是一行注释");
bd.appendChild(comm);
//移除属性 ,根据属性名来移除
myDiv.removeAttribute("id");
//移除属性对象
myDiv.removeAttributeNode(attr); //传入的是属性对象,不是属性
//站在父元素的角度,删除子元素
bd.removeChild(myDiv);
//myDiv.remove();
//站在自身的角度删除自己
comm.remove();
</script>
</html>
替换元素和插入元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="myh1">这是原来的元素</h1>
<div id="d1">
<h2 id="nei">这是原来的h2</h2>
</div>
</body>
<script type="text/javascript">
//站在父元素的角度,替换子元素,值1:新的元素,值2:是要替换的旧元素。
//bd.replaceChild(h4, h);
//站在父标签的角度,在这个h1标签对象的前面插入h5这个标签对象。
//bd.insertBefore(h5, h1);
var oldEle=document.getElementById("myh1");
var bd=document.body;
var myh2=document.createElement("h2");
myh2.innerText="新的元素h2";
bd.replaceChild(myh2,oldEle);
var myh3=document.createElement("h3");
myh3.innerText="333333333333333333333";
var myd1=document.getElementById("d1");
//myd1.appendChild(myh3);往后面追加
//站在父标签的角度,在这个#nei标签对象的前面插入myh3这个标签对象。
myd1.insertBefore(myh3,document.getElementById("nei"));
</script>
</html>
事件代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="show()">一个按钮</button>
<button type="button" id="btn">第二个按钮</button>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
<h1 class="myh1">2222222222222222222</h1>
</body>
<script type="text/javascript">
//事件:生活中指的就是一件事情
//JS中的事件:指的就是用户的行为,动作,单击,双击,鼠标移动,而且你要监听用户的操作行为
// * 事件源:事件发生的组件。比如按钮
// * 监听器:一个对象。当事件源上发生了事件,就执行对象中的某些方法
// * 注册监听:将监听器绑定到事件源上,监听事件的发生
//绑定事件的方式,方式1:直接在html元素上来绑定
//<button type="button" οnclick="show()">一个按钮</button>
function show(){
alert("点击了");
}
//方式2:使用代码绑定
var btn=document.getElementById("btn");
btn.onclick=function(){
alert("点击了2222222");
}
var arr=document.getElementsByClassName("myh1");
for(let i=0;i<arr.length;i++){
arr[i].onclick=function(){
//alert("h2点击了");
//注意使用this,this表示你当前点击的那个对象
//this.style.background="red";
this.style.background="red";
}
}
</script>
</html>
失去焦点和获取焦点事件代码演示(表单验证)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- οnsubmit="return ture" 表单提交事件,返回true 表单能够提交,返回false表单不能提交-->
<form action="#" method="get" onsubmit="return checkAll()">
用户名:<input onblur="checkUsername()" type="text" name="username" id="username" value=""
placeholder="请输入用户名6-16个字母" />
<span id="usp"></span>
<br>
密码:<input type="password" onblur="checkPassword()" name="password" id="password" value=""
placeholder="请输入密码6-16个数字" />
<span id="psp"></span>
<br>
<input type="submit" id="" name="" value="注册" />
</form>
</body>
<script type="text/javascript">
//校验所有表单项的规则
function checkAll() {
return checkUsername() && checkPassword(); //true&&true
}
//校验用户名
function checkUsername() {
//定义正则
//定义规则 6-16字母 不区分大小写
var regx = /^[a-zA-Z]{6,16}$/;
//获取用户输入的用户名
var username = document.getElementById("username").value.trim();
var flag = regx.test(username);
var usp = document.getElementById("usp");
if (flag) {
usp.innerHTML = "<b style='color: green;'>用户名规则正确<b/>"
} else {
usp.innerHTML = "<b style='color:red;'>用户名规则错误<b/>"
}
return flag;
}
//校验密码
function checkPassword() {
//定义正则
//定义规则 6-16字母 不区分大小写
var regx = /^[1-9][0-9]{5,15}$/;
//获取用户输入的用户名
var password = document.getElementById("password").value.trim();
var flag = regx.test(password);
var psp = document.getElementById("psp");
if (flag) {
psp.innerHTML = "<b style='color: green;'>密码规则正确<b/>"
} else {
psp.innerHTML = "<b style='color:red;'>密码规则错误<b/>"
}
return flag;
}
</script>
</html>