一、事件
js是以事件驱动为核心的一门语言。
事件三要素：
- 事件源
- 事件
- 事件驱动程序
事件的实现：
- 确定事件源（通过DOM类选择器实现）
document.getElementById(“box”);
- 确定事件
- 绑定函数（事件发生了，我需要做什么）
box.onclick = function(){ 程序 };
<script type="text/javascript">
//当我点击按钮的时候，弹出警示框
// 1.确定事件源 按钮 获取了按钮
var btn = document.getElementById('btn');
// console.log(btn)
//2.确定事件
//3.绑定函数
btn.onclick = function () {
alert("说了别点我")
}
//当输入框失去焦点的时候，对用户输入的内容进行校验，首先不能为空，其次账号必须是admin，根据校验结果在span中给出提示信息
document.getElementById("userName").onblur = function () {
var value = this.value;
if (value == "") {
document.getElementById("msg").innerHTML = "账号不能为空！"
this.focus();
}else if (value != 'admin') {
document.getElementById("msg").innerHTML = "账号不合法！"
this.value = "";
this.focus();
}else {
document.getElementById("msg").innerHTML = ""
}
}
</script>常用事件
二、DOM概述
三、DOM的数据结构及节点
HTML的组成部分为节点（ Node）
- 在HTML当中一切都是节点……
- 由结构图中我们可以看到，整个文档就是一个文档节点。
- 每一个HMTL标签都是一个元素节点（标签）。
- 标签中的文字则是文字节点。（文本）
- 标签的属性是属性节点。（属性）
四、节点的获取【选择器（9大）】
- id选择器 ：由于id属性在页面中不能重复，所以id选择器只能返回一个页面元素
var lisi = document.getElementById("lisi");
- name选择器
var lisis = document.getElementsByName("lisi");
- 标签选择器
var lis = document.getElementsByTagName("li");
- 类名（class）选择器：查找 HTML 元素在 IE 5,6,7,8 中无效
var liss = document.getElementsByClassName("one");
- 特殊情况：取数组中的第一个元素
document.getELementByTagName("标签名")[0]；
五、DOM 访问关系（节点的获取）
- 父节点：parentNode
- 兄弟节点： Sibling 兄弟 Next Previous
- 单个子节点：Child
firstChild 第一个子节点（包括空文档和换行节点） firstElementChild 第一个元素子节点 lastChild 最后一个子节点（包括空文档和换行节点） lastElementChild 最后一个元素节点 childNodes 所有的子节点 children 所有元素类型的子节点(包括空文档和换行节点),它是标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点
- *nodeType: == 1 表示元素节点（即标签）
== 2 表示属性节点
== 3 表示文本节点
节点自己.parentNode.children[index];随意得到兄弟节点。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>张三</li>
<li id="lisi">李四</li>
<li>王五</li>
</ul>
<script type="text/javascript">
//1.获取李四节点
var lisi = document.getElementById("lisi");
//2.获取李四的父节点
var ul = lisi.parentNode;
console.log(ul)
//3.获取李四的下一个兄弟节点
var nextNode = lisi.nextSibling;
console.log(nextNode)
//4.获取李四的下一个元素类型的兄弟节点
var nextElementNode = lisi.nextElementSibling;
console.log(nextElementNode)
//5.获取李四的上一个兄弟节点
var previousNode = lisi.previousSibling;
console.log(previousNode)
//6.获取李四的上一个元素类型的兄弟节点
var previousElementNode = lisi.previousElementSibling;
console.log(previousElementNode)
//7.获取第一个子节点
var first = ul.firstChild;
console.log(first)
//8.获取第一个元素子节点
var firstElement = ul.firstElementChild;
console.log(firstElement)
//9.获取第一个子节点
var last = ul.lastChild;
console.log(last)
//10.获取第一个元素子节点
var lastElement = ul.lastElementChild;
console.log(lastElement)
// 11.获取所有的子节点
var childNodes = ul.childNodes;
console.log(childNodes)
// 12.获取所有元素类型的子节点
var children = ul.children;
console.log(children)
</script>
</body>
</html>六、节点的操作：节点的访问关系都是属性。节点的操作都是函数或者方法。
- 创建节点：document.createElement();
- 插入节点：
appendChild();在该节点的最后追加节点
insertBefore();在该节点前插入
- 删除节点：节点.remove
- 复制节点：节点.cloneNode(true)
- 节点属性：节点.属性
- 获取：getAttribute(名称)
- 设置：setAttribute(名称, 值)
- 删除：removeAttribute(名称)
- 注意：IE6、7不支持。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>张三</li>
<li id="lisi">李四</li>
<li>王五</li>
</ul>
<script type="text/javascript">
//1.创建节点 <li>赵六</li>
var zhaoliu = document.createElement("li");
//2.给节点添加内容,使用innerHTML
zhaoliu.innerHTML = '赵六';
//3.将赵六追加进ul,appendChild(子节点)追加，保存在父元素的最后面
var ul = document.getElementsByTagName("ul")[0];
//ul.appendChild(zhaoliu)
//4.将赵六添加进ul。但是插入李四之前 父节点.insertBefore(新节点，目标节点);
//注意：如果目标节点是空，该方法等效于appendChild
var lisi = document.getElementById('lisi');
//ul.insertBefore(zhaoliu,lisi);
ul.insertBefore(zhaoliu,null);
//5.删除节点 父节点.removeChild(子节点)
ul.removeChild(lisi);
//6.复制节点 节点.cloneChild(boolean) true:深复制 false：浅复制
//深复制复制的时候，会将子节点一起复制
//浅复制之复制当前节点本身
var ulCopy = ul.cloneNode(true);
console.log(ulCopy)
</script>
</body>
</html>七、DOM 详解（属性操作）
- value：属性
- innnerHTML：所有标签的子元素（包括子标签）
- innnerText：获取里面的内容元素，不要标签
- textContent：获取里面的内容元素，保留了空格
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
账号：<input type="text" value="123" id="user">
<select name="" id="address">
<option value="sh">上海</option>
</select>
<textarea name="" id="info" cols="30" rows="10">
456
</textarea>
<ul>
<li>张三</li>
<li id="lisi">李四</li>
<li>王五</li>
</ul>
<script type="text/javascript">
//1.value
var v1 = document.getElementById('user').value;
console.log(v1)
var address = document.getElementById('address').value;
console.log(address)
var info = document.getElementById('info').value;
console.log(info)
var ul = document.getElementsByTagName('ul')[0];
console.log(ul.innerHTML)
console.log(ul.innerText)
console.log(ul.textContent)
ul.innerHTML = '<li>admin</li>';
</script>
</body>
</html>
- style属性设置和获取（$方法的封装）
（style是一个对象，不能获取内嵌和外链）
1.样式少的时候使用
2.style是对象
3.值是字符串，没有设置值是“”；
4.设置了类样式不能获取。（只和行内式交互，和内嵌和外链无关）
5.box.style.cssText = “字符串形式的样式”；
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<p>测试文字</p>
<script type="text/javascript">
//1.获取p元素
var p1 = document.getElementsByTagName('p')[0];
//2.设置p元素的文本颜色是红色
//p1.style.color = 'red';
//3.设置p元素的字号是36px
//p1.style.fontSize = '36px'
//4.给p元素设置class属性
//p1.setAttribute('class', 'one')
p1.className = 'one';
</script>
</body>
</html>八、生成标签
- 第一种创建方式：document.write();
- 第二种：直接利用元素的innerHTML方法。（innerText方法不识别标签）
- 第三种：利用dom的api创建元素
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
