-
js
-
mysql
DOM 文档对象模型
分成三个部分：
1. XML DOM-
核心 DOM
-
HTML DOM
-
核心DOM
-
Document
-
Comment
-
Element
-
Attribute
-
TextNode
-
Node
Document 文档对象
1.创建
从window对象中获取 window.document,window可以省略不写
2.方法
-
获取Element元素对象的方法
-
getElementById("id名称") 获取一个元素对象
-
getElementsByClassName("class名称") 获取一个对象数组
-
getElementsByTagName("标签名称") 获取一个对象数组
-
getElementsByName("name属性值") 获取一个对象数组
-
-
创建其他DOM对象
-
createElement("标签名称")
-
createTextNode("文本内容")
-
createAttribute("属性 ")
-
createComment("注释")
-
3.属性
title 返回当前文档的标题。
URL 返回当前文档的 URL。
URL 返回当前文档的 URL。
4.特点
Comment注释对象
Element元素对象
1.创建
有两种方式创建
-
通过文档document的获取元素对象的方法来获取元素对象
-
通过document.createElement() 来创建元素对象
2.方法
3.属性
4.特点
Node节点对象
节点对象可以是元素节点，属性节点，文本节点，任何节点都有父节点和子节点，但是文本节点没有子节点
方法：
CRUD操作 添加节点 删除节点 查找节点 修改节点(替换节点)
-
添加节点 appendChild() 向父节点中添加子节点
-
删除节点 removeChild() 从父节点中删除子节点
-
替换节点 replaceChild() 用一个新节点替换原来的节点
属性：
parentNode：获取子节点的父节点
childNodes: 获取父节点的所有的子节点
firstChild：获取父节点中的第一个子节点
lastChild: 获取父节点中的最后一个子节点
Event 事件对象
概念：某些组件被执行了一些操作，会触发一些功能效果。
事件有几个因素：
事件：某些操作(功能、方法)。如 点击、双击、键盘按下、键盘弹起.......
事件源：组件 被操作的对象 元素/标签 输入框、超链接、按钮.....
监听器：Listener Filter Servlet(服务中间件，桥梁) HTML CSS JS，执行事件的代码
注册监听：将事件、事件源、监听器三者绑定到一起。当事件源上发生了某个事件，则会触发执行某个监听器代码。
常见的事件：
-
点击事件
点击事件： onclick
双击事件： ondblclick
-
焦点事件
获取焦点： onfocus
失去焦点 onblur
-
加载事件
onload 一个页面或者一张图像完成加载
-
鼠标事件
鼠标按键按下： onmousedown
鼠标按键松开： onmouseup
鼠标离开： onmouseout
鼠标移动： onmousemove
鼠标悬浮到某元素上：onmouseover
-
键盘事件
键盘按下： onkeydown
键盘松开： onkeyup
键盘按下并松开： onkeypress
-
表单事件
表单提交：onsubmit
表单重置：onreset
-
选择和改变事件
onchange 文本内容发生改变触发
onselect 文本被选中触发
HTML DOM 标签对象
-
标签体内容获取和设置 属性： innerHTML(可以插入文本内容和标签以及组合标签) innerText(插入文本内容)
-
使用html标签对象拥有的属性
-
通过标签对象更改标签的样式： style 通过style属性设置css样式
div.style.border = "1px solid black";
div.style.background = "red";
div.style.backgroundImage = "url(图像路径)"
一般不推荐 使用css代码提前设置
通过className属性给该标签设置对应的class值
编译器代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素对象的方式</title>
</head>
<body>
<div class = "divClass"></div>
<div id="div02" class = "divClass"></div>
<div name = "divName02" class = "divClass"></div>
<div name = "divName02" class = "divClass"></div>
<div >
<div style="height: 100px;width: 100px;border: 1px solid;"></div>
</div>
<script>
/*
- getElementById("id名称") 获取一个元素对象
- getElementsByClassName("class名称") 获取一个对象数组
- getElementsByTagNme("标签名称") 获取一个对象数组
- getElementsByName("name属性值") 获取一个对象数组
*/
var div02 = document.getElementById("div02");
//alert(div02);
var divs01 = document.getElementsByClassName("divClass");// 对象数组
// 可以遍历
for (var i = 0; i <divs01.length ; i++) {
// 数组名称[i]
// divs01[i].innerHTML += "中国你好" + "<input>";
}
var divs02 = document.getElementsByTagName("div");
// 遍历
for (var i = 0; i <divs02.length; i++) {
//divs01[i].innerHTML += "Hello World" + "<button></button>";
}
// getElementsByName("name属性值") 获取一个对象数组
var divs03 = document.getElementsByName("divName02");// 对象数组
divs03[0].innerHTML += "<a href='index.jsp'>首页</a>";
divs03[1].innerHTML += "<a href='https://www.baidu.com'>百度一下</a>";
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建其他DOM对象</title>
</head>
<body id="body">
<script>
/*
- createElement("标签名称")
- createTextNode("文本内容")
- createAttribute("属性 ")
- createComment("注释")
*/
var table = document.createElement("table");// 元素对象 Element
//alert(table);
table.style.height = "100px";
table.style.width = "100px";
table.style.border = "1px solid black";
table.innerText = "课程表";
var body = document.getElementById("body");
body.appendChild(table);
var title = document.title;
alert(title);
var url = document.URL;
alert(url);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注释节点操作</title>
</head>
<body id="body">
<script>
/*
appendData()
*/
var body = document.getElementById("body");
var comment = document.createComment("我是一个注释节点");
comment.appendData("这是一个注释");
body.appendChild(comment);
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习Element元素对象</title>
<style>
.one.two.three{
height:40px;
width: 500px;
border: 1px dotted red;
}
</style>
</head>
<body>
<a>点击有惊喜</a><!--纯文本-->
<input type="button" name="btn01" value="设置样式">
<script>
/*
*/
var a = document.getElementsByTagName("a")[0];// a就是页面a标签
a.onclick = function () {
// 点我换成输入框按钮
//a.innerHTML = "<input type='button' value='惊喜到了！'>";
// 点我切换成真正的a标签 添加超链接地址
//a.href = "http://www.zhiyou100.com";
// 属性操作 setAttribute(属性名称，属性值)
a.setAttribute("href","http://www.zhiyou100.com");
a.setAttribute("href","javascript:void(0)");// 阻止跳转
}
var button = document.getElementsByName("btn01")[0];
var flag = true;
button.ondblclick = function () {
// 点击按钮的边框变成红色 边框变大
if (flag) {
//button.setAttribute("class","one");
button.className = "one two three";
// 再双击一下去掉样式
flag = false;
} else {
button.setAttribute("class","");
flag = true;
}
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#oneDiv {
height: 500px;
width: 500px;
border: 1px solid black;
}
#twoDiv{
height: 300px;
width: 300px;
border: 1px solid red;
}
.threeDiv {
height: 100px;
width: 100px;
border: 3px dashed green;
}
</style>
</head>
<body>
<div id = "oneDiv">
<div id = "twoDiv"></div>
</div>
<input type="button" id = "add" value="添加子节点">
<input type="button" id = "del" value="删除子节点">
<script>
/*
删除节点 removeChild() 从父节点中删除子节点
*/
var del = document.getElementById("del");
var add = document.getElementById("add");
var parentNode = document.getElementById("oneDiv");
var sonNode = document.getElementById("twoDiv");
var parentNode1 = sonNode.parentNode;
//var child = parentNode.childNodes[0];
// 定义一个开关
var flag = true;
// 定义一个div元素节点
var div;
// 绑定事件 删除子节点
del.onclick = function () {
if (flag) {
parentNode.removeChild(sonNode);
flag = false;
}
parentNode.removeChild(div);
}
// 绑定事件 添加子节点
add.onclick = function () {
// 创建一个div子节点
div = document.createElement("div");
div.setAttribute("class","threeDiv");
// 通过父节点存进去
parentNode.appendChild(div);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点操作</title>
</head>
<body>
<input type="text" placeholder="请插入文本内容">
<script>
/*
*/
var input = document.getElementsByTagName("input")[0];
input.onfocus = function () {
// input标签获取焦点
input.value = "input标签获取焦点";
}
input.onblur = function () {
// 该焦点已失去
input.value = "该焦点已失去";
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件操作</title>
<style>
.div{
height: 400px;
width: 400px;
background: red;
font-size: 30px;
}
</style>
<script>
/*
1. 鼠标事件
鼠标按键按下： onmousedown
鼠标按键松开： onmouseup
鼠标离开： onmouseout
鼠标移动： onmousemove
鼠标悬浮到某元素上：onmouseover
2. 键盘事件
键盘按下： onkeydown
键盘松开： onkeyup
键盘按下并松开： onkeypress
3. 表单事件
表单提交：onsubmit
表单重置：onreset
4. 选择和改变事件
onchange 文本内容发生改变触发
onselect 文本被选中触发
*/
// 让页面重新加载
window.onload = function () {
var input = document.getElementsByTagName("input")[0];
// 事件绑定
/*input.onmousedown = function () {
//alert("鼠标被按下了！");
input.value = "鼠标被按下了";
}
input.onmouseup = function () {
input.value = "鼠标松开了";
}
input.onmouseout = function () {
input.value = "鼠标离开了";
}*/
/*input.onmouseleave = function () {
input.value = "鼠标从该标签离开了";
}*/
/*input.onmouseover = function () {
input.value = "鼠标悬浮了";
}*/
/*input.onkeydown = function () {
alert("键盘被按下了");
}*/
/* input.onkeyup = function () {
alert("键盘松开了");
}*/
/* input.onkeypress = function () {
alert("键盘按下并松开");
}*/
var form = document.getElementsByTagName("form")[0];
// 绑定表单提交事件
/*form.onsubmit = function () {
alert("表单被提交了");
}*/
form.onreset = function () {
alert("表单被重置了");
}
// 选择和改变事件
input.onchange = function () {
input.style.border = "3px solid red";
}
input.onselect = function () {
alert("文本被选中了。。");
}
var select = document.getElementsByTagName("option");
for (var i = 0; i <select.length; i++) {
select[i].onselect = function () {
alert("被选择了");
}
}
var date = document.getElementById("date");
var flag = true;
date.onblur = function () {
alert("进来了");
var inputs = document.getElementsByClassName("text");
for (var i = 0; i <inputs.length ; i++) {
if (inputs[i].value == "" || inputs[i].value == null) {
form.disabled = true;// 真失效
flag = false;
}
}
if (flag) {
document.getElementById("one").disabled = false;// 可以使用
}
}
}
function commit() {
alert("此时表单准备提交！");
return true;// 不提交
}
</script>
</head>
<body>
<input type="text" value="输入内容" placeholder="请输入文本信息">
<select multiple="multiple">
<option>---请选择专业---</option>
<option value = "t1">计算机科学与工程</option>
<option value = "t2">通信工程</option>
<option value = "t3">软件工程</option>
<option value = "t4">物联网</option>
<option value = "t5">人工智能</option>
<!–离散数学 编译原理 汇编语言 数据结构与算法 –>
</select>
<form action="#" method="get" onsubmit="return commit();">
<input class="text" type="text">
<input class="text" type="password">
<input class="text" type="date" id="date">
<input id="one" type="submit" disabled>
</form>
</body>
</html>
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
