这篇博客详细介绍了JavaScript如何操作HTML文档对象模型（DOM），包括通过ID、标签名和类名获取元素，以及节点的获取和操作。此外，还讲解了浏览器对象模型（BOM）中的window对象，如location属性、弹窗方法以及表单元素的获取和表单事件的处理。内容涵盖动态HTML的创建、节点操作、浏览器交互以及表单的验证和事件响应。
1. DOM操作
通过HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
通过可编程的对象模型，JavaScript获得了足够的能力来创建动态的HTML。
-
JavaScript 能够改变页面中的所有HTML元素
-
JavaScript 能够改变页面中所有的HTML属性
-
JavaScript 能够改变页面中所有的CSS样式
-
JavaScript 能够对页面中的所有事件作出反应
1.1 获取节点
通常，通过JavaScript，我们都需要操作HTML元素，为了做到这件事儿，我们必须首先找到该元素。有三种方法来做这件事儿。
-
通过id找到HTML元素
-
通过标签名找到HTML元素
-
通过类名找到HTML元素
1.1.1 通用方法
| 方法名 | 含义 |
|---|---|
| document.getElementById() | 通过id获取 |
| document.getElementsByTagName() | 通过标签名获取 |
| document.getElementsByClassName() | 通过类名获取 |
| document.getElementsByName() | 通过名称获取 |
| document.images() | 获取图片 |
| document.body | 获取body窗体所有节点 |
1.1.2 父子关系节点
| 属性名 | 含义 |
|---|---|
| childNodes | 获取元素内部的子节点（包括文本节点和注释节点） |
| children | 获取元素内部的所有标签子元素 |
| firstChild | 获取元素内部的第一个子节点 |
| firstElementChild | 获取元素内部的第一个标签子元素 |
| lastChild | 获取元素内部的最后一个子节点 |
| lastElementChild | 获取元素内部的最后一个标签子元素 |
| previousSibling | 获取当前元素的上一个子节点 |
| previousElementSibling | 获取当前元素的上一个标签元素 |
| nextSibling | 获取当前元素的下一个相邻节点 |
| nextElementSibling | 获取当前元素的下一个标签元素 |
| parentNode | 获取父级节点 |
| parentElement | 获取父级元素节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JavaScript：获取节点 </title>
<style type="text/css">
#bigbox{
width:200px;
height:200px;
border:1px solid #000;
}
</style>
</head>
<body>
<div></div>
<div id="bigbox">
<h2>王者荣耀</h2>
<ol>
<li>王者</li>
<li>星耀</li>
<li>钻石</li>
</ol>
</div>
<script type="text/javascript">
//开始获取html当中的节点
//1.获取大盒子节点
var bigbox = document.getElementById('bigbox');
//2.获取元素内部的所有的子节点（Tab、换行均视为子节点）
var c1 = bigbox.childNodes;
//3.获取元素内部所有的标签子元素（不包含Tab、换行符，孙子元素）
var c2 = bigbox.children; //<h2></h2> <ol></ol>
//3.获取元素内部的第一个子节点（包含Tab、换行符等）
var c3 = bigbox.firstChild;
//4.获取元素内部的第一个标签子元素
var c4 = bigbox.firstElementChild; //<h2>王者荣耀</h2>
//5.获取元素内部的最后一个子节点
var c5 = bigbox.lastChild;
//6.获取元素内部的最后一个标签子元素
var c6 = bigbox.lastElementChild;
//7.获取当前元素的上一个节点
var c7 = bigbox.previousSibling;
//8.获取当前元素的上一个标签元素
var c8 = bigbox.previousElementSibling;
//9.获取当前元素的下一个节点
var c9 = bigbox.nextSibling;
//10.获取当前元素的下一个标签元素
var c10 = bigbox.nextElementSibling;
//11.获取当前元素的父级节点
var c11 = bigbox.parentNode;
//12.获取当前元素的父级标签元素
var c12 = bigbox.parentElement;
console.log(c12);
</script>
</body>
</html>1.1.3 操作元素
| 方法名 | 含义 |
|---|---|
| setAttribute() | 设置属性 |
| getAttribute() | 获取属性 |
| removeAttribute() | 删除属性 |
1.2 操作节点
| 方法名 | 含义 |
|---|---|
| createElement() | 创建节点 |
| appendChild() | 追加节点 |
| insertBefore() | 头部追加节点 |
| removeChild() | 删除节点 |
| replaceChild() | 替换节点 |
| cloneNode() | 克隆节点 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JavaScript：节点操作 </title>
<style type="text/css">
#bigbox{
width:1000px;
height:400px;
border:1px solid #ccc;
margin:20px auto;
}
</style>
</head>
<body>
<!-- 定义添加节点的button -->
<button>尾部追加div节点</button>
<button>头部插入div节点</button>
<button>删除第一个div节点</button>
<button>创建新元素来替换最后一个元素</button>
<button>克隆最后一个元素</button>
<!-- 定义存放添加节点的大div盒子 -->
<div id="bigbox"></div>
<script type="text/javascript">
//获取bigbox大盒子的节点
var bigbox = document.getElementById('bigbox');
//1.获取button节点
var but = document.getElementsByTagName('button');
//2.给第一个button按钮添加单击事件
but[0].onclick = function(){
//1.创建一个div盒子
var div = document.createElement('div');
//2.给该div添加一些样式
div.style.width = '50px';
div.style.height = '50px';
div.style.background = '#fc0';
div.style.float = 'left';
div.style.margin = '8px';
//3.追加到大盒子里去
bigbox.appendChild(div);
}
//3.给第二个button按钮添加单击事件
but[1].onclick = function(){
//1.创建一个div盒子
var div = createDiv('pink');
//2.获取bigbox中第一个子元素
var first = bigbox.firstElementChild;
//2.添加到bigbox大盒子里去
bigbox.insertBefore(div, first);
}
//4.给第三个button按钮添加单击事件
but[2].onclick = function(){
//1.获取bigbox的第一个元素
var first = bigbox.firstElementChild;
//2.删除第一个元素
bigbox.removeChild(first);
}
//5.给第四个button按钮添加单击事件
but[3].onclick = function(){
//1.获取最后一个div节点
var last = bigbox.lastElementChild;
//2.创建新的节点
var newdiv = createDiv('purple');
//3.执行替换
bigbox.replaceChild(newdiv, last);
}
//6.给第五个button按钮添加单击事件
but[4].onclick = function(){
//1.获取最后一个元素节点
var last = bigbox.lastElementChild;
//2.克隆最后一个元素节点
var newDiv = last.cloneNode();
//3.将克隆猴的新div追加到尾部
bigbox.appendChild(newDiv);
}
//创建div盒子的函数
function createDiv(bgcolor){
//1.创建一个div盒子
var div = document.createElement('div');
//2.给该div添加一些样式
div.style.width = '50px';
div.style.height = '50px';
div.style.background = bgcolor;
div.style.float = 'left';
div.style.margin = '8px';
//3.返回该div
return div;
}
</script>
</body>
</html>
4. BOM操作
浏览器对象模型（BOM）使JavaScript有能力与浏览器“对话”。
4.1 浏览器对象模型
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
4.2 Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header"); //与此相同 document.getElementById("header");
4.3 Window Location
| 方法名 | 含义 |
|---|---|
| window.location | 查看location属性信息 |
| window.location.hostname | 返回当前web主机的域名 |
| window.location.pathname | 返回当前页面的路径和文件名 |
| window.location.port | 返回web主机的端口 |
| window.location.protocol | 返回所使用的web协议（http: 或 https:） |
| window.location.host | 返回主机和端口信息 |
| window.location.href | 返回URL中的href |
| window.location.search | 返回URL中的查询部分 |
//查看当前web主机域名 console.log(location.hostname); //查看当前页面的路径和文件名 console.log(location.pathname); //查看web主机的端口 console.log(location.port); //查看所使用的web协议 console.log(location.protocol);
4.4 Window 弹窗
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
4.4.1 警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
alert('警告你，离我远点~ 否则我报警啦！');
4.4.2 确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
var r=confirm("按下按钮");
if (r==true){
x="你按下了\"确定\"按钮!";
}else{
x="你按下了\"取消\"按钮!";
}
4.4.3 提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
4.4.4 调用打印界面
有些时候，我们需要打印当前页面的内容，因此我们可以调用它
document.getElementByTagName('button')[1].onclick = function(){
print();
}
4.5 计时事件
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval()：间隔指定的毫秒数不停地执行指定的代码
setTimeout()：在指定的毫秒数后执行指定代码
4.5.1 setInterval
//设置一个计时器
var time = setInterval(function(){alert("Hello")},3000);
//停止计时器
clearInterval(time);
4.5.2 setTimeout
//等待3秒，然后弹出“Hello”
var time = setTimeout(function(){alert("Hello")},3000);
//停止计时器
clearTimeout(time);
4.6 操作表单
4.6.1 获取表单元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JavaScript：操作表单 </title>
</head>
<body>
<form action="#" method="get">
账号：<input type="text" name="username" value="123" id=""><br><br>
密码：<input type="password" name="password" value="456" id=""><br><br>
性别：<input type="radio" name="sex" value="w" id=""> 女
<input type="radio" name="sex" value="m" id="" checked> 男<br><br>
爱好：<input class="duoxuan" type="checkbox" name="hobby[]" value="sports" id=""> 运动
<input class="duoxuan" type="checkbox" name="hobby[]" value="game" id="" checked="checked"> 游戏
<input class="duoxuan" type="checkbox" name="hobby[]" value="program" id="" checked="checked"> 编程<br><br>
简介：<textarea name="intro" id="" cols="30" rows="10">默认值</textarea><br><br>
城市：<select name="city" id="">
<option value="beijing">北京</option>
<option value="tianjin" selected>天津</option>
<option value="hongkang">香港</option>
</select><br><br>
<input type="submit" value="提交">
</form>
<script>
//1.获取表单元素
var form = document.getElementsByTagName('form');
//2.获取账号的value值
var username = form[0].username.value;
//3.获取密码的value值
var password = form[0].password.value;
//4.获取性别的value值
var sex = form[0].sex.value;
//5.获取爱好的value值
var duoxuan = document.getElementsByClassName('duoxuan');
var hobby = [];
//6.遍历获得多选按钮被选中的值
for(var i=0; i<duoxuan.length; i++){
if(duoxuan[i].checked){
hobby.push(duoxuan[i].value);
}
}
//7.获取简介的innerHTML内容
var intro = form[0].intro.innerHTML;
//8.获取城市的被选中的值
var city = form[0].city.value;
console.log(username,password,sex,hobby,intro,city);
</script>
</body>
</html>4.6.2 表单事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> JavaScript：表单事件 </title>
</head>
<body>
<form action="1.php" method="get">
账号：<input type="text" name="username" value="" id=""><span id="tishi1"></span><br><br>
密码：<input type="password" name="password" value="" id=""><span id="tishi2"></span><br><br>
性别：<input type="radio" name="sex" value="w" id=""> 女
<input type="radio" name="sex" value="m" id="" checked> 男<br><br>
爱好：<input class="duoxuan" type="checkbox" name="hobby[]" value="sports" id=""> 运动
<input class="duoxuan" type="checkbox" name="hobby[]" value="game" id="" checked="checked"> 游戏
<input class="duoxuan" type="checkbox" name="hobby[]" value="program" id="" checked="checked"> 编程<br><br>
简介：<textarea name="intro" id="" cols="30" rows="10">默认值</textarea><br><br>
城市：<select name="city" id="">
<option value="beijing">北京</option>
<option value="tianjin" selected>天津</option>
<option value="hongkang">香港</option>
</select><br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<button id="sub">提交</button>
<button id="res">重置</button>
<button id="foc">用户名获得焦点</button>
<button id="blu">用户名失去焦点</button>
<button id="sel">下拉菜单被选中</button>
<script>
//1.获取表单元素
var form = document.getElementsByTagName('form');
//2.提交事件
form[0].onsubmit = function(){
//3.判断用户是否输入了账号和密码，如果没有输入
if(this.username.value=='' && this.password.value==''){
tishi1.innerHTML = '请输入账号！';
tishi2.innerHTML = '请输入密码！';
//3.阻止表单提交的默认行为
return false;
}
}
//3.重置事件
form[0].onreset = function(){
var res = confirm('确定要重置表单吗？未保存的内容可能会丢失！');
if(res){
return true;
}else{
return false;
}
}
//4.获得焦点
form[0].username.onfocus = function(){
this.style.color = 'white'
this.style.background = 'red';
this.select(this.value);
}
//5.失去焦点
form[0].username.onblur = function(){
this.style.color = 'black'
this.style.background = 'white';
this.style.border = '1px solid black';
}
form[0].city.onchange = function(){
alert(123);
}
//表单常用方法
sub.onclick = function(){
form[0].submit();
}
res.onclick = function(){
form[0].reset();
}
foc.onclick = function(){
form[0].password.focus();
}
blu.onclick = function(){
form[0].password.blur();
}
</script>
</body>
</html>
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
