（1）改变这个元素的颜色
（2）点击这个元素实现某些效果
（3）直接把这个元素删除在DOM中，我们使用“树形结构”来表示一个页面, 在这个树上，html标签就是树根，叫做根元素。html标签内部有 head、body这两个标签，这两个标签位于同意层，所以也叫做兄弟节点。html标签是作为这两个兄弟节点的父节点。head标签内部有两个标签，title和meta, 这两个标签也是作为head标签的子节点，所以，head就是这两个标签的父节点，这两个标签之间是兄弟节点。用这种简单的族谱关系，可以很清楚的把一个页面表示出来。
记住：每一个元素就是一个节点，而每一个节点就是一个对象。在 *** 作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关 *** 作。 1.2 节点类型
DOM节点共有12种类型，记住常见的以下3种：
（1）元素节点
（2）属性节点
（3）文本节点
节点与元素是不一样的概念，节点包括元素
Javascript中，用nodeType属性来判断一个节点的类型
表1 不同节点的nodeType属性值123
节点类型注意事项：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
window.onload = function()
{
var oDiv = document.getElementById("main");
oDiv.style.color="red";
var oDiv = document.getElementsByTagName("div");
for(var i=0; i<oDiv.length;i++)
{
oDiv[i].style.color="red";
}
var oDiv = document.getElementsByClassName("yuansu");
for(var i=0; i<oDiv.length;i++)
{
oDiv[i].style.color="blue";
}
var oDiv = document.querySelector(".yuansu");
oDiv.style.color="red";
var oDiv = document.querySelectorAll(".yuansu");
for(var i=0; i<oDiv.length;i++)
{
oDiv[i].style.color="yellow"
}
}
script>
head>
<body>
<div class="yuansu">选择了就不要回头看div>
<div class="yuansu">选择了就不要回头看div>
<div id="main">选择了就不要回头看div>
body>
html>
(1) 创建一个简单的节点
（2）创建一个带有属性的节点
DOM对象有属性和方法，属性用A.B, 方法用A.function()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script>
window.onload = function()
{
// 创建简单的节点,元素加文本
var e2 = document.getElementById("jianchi");
var e1 = document.createElement("strong");
var txt = document.createTextNode("键盘敲烂");
e1.appendChild(txt);
e2.appendChild(e1);
// 创建复杂节点,添加元素的属性.首先创建一个DOM对象,添加对象的属性.和方法()
var oBody = document.body;
var oInput = document.createElement("input");
oInput.id = "submit";
oInput.type = "button";
oInput.value = "提交";
oBody.appendChild(oInput);
}
script>
head>
<body>
<div id="jianchi">div>
body>
html>
(1)A.appendChild(B); 把一个新元素插入到父元素的内部子元素的“末尾”。
(2)insertBefore()将一个新元素插入到父元素中的某一个子元素“之前”。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<script>
window.onload = function()
{
// 首先获取插入按钮
var oBtn = document.getElementById("btn");
// 然后为按钮添加一个点击事件
oBtn.onclick = function()
{
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
// 将文本框的内容转换为“文本节点”
var textNode = document.createTextNode(oTxt.value);
// 动态创建一个li元素
var oLi = document.createElement("li");
// 将文本节点内容添加到li元素中去
oLi.appendChild(textNode);
// 将li元素插入到ul元素中
oUl.appendChild(oLi)
// 将li元素插入到ul元素的第一个元素之前
oUl.insertBefore(oLi,oUl.firstElementChild);
};
}
script>
<body>
<ul id="list">
<li>HTMLli>
<li>CSSli>
<li>JavaScriptli>
<li>vue.jsli>
ul>
<input id="txt" type="text"> <input id="btn" type="button" value="插入" >
body>
html>
A.removeChild(B);
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<script>
window.onload = function()
{
// 首先获取这个按钮
// var oBtn = document.getElementById("btn");
// oBtn.onclick = function()
// {
// var oUl = document.getElementById("list");
// oUl.removeChild(oUl.lastElementChild);
// }
// 删除整个列表，整个列表是body元素的子元素，可以通过获取Body元素，然后删除body元素中的子元素
var oBtn = document.getElementById("btn");
oBtn.onclick = function()
{
var oUl = document.getElementById("list");
document.body.removeChild(oUl);
}
}
script>
<body>
<ul id="list">
<li>HTMLli>
<li>CSSli>
<li>JavaScriptli>
<li>Vue.jsli>
ul>
<input id="btn" type="botton" value="删除"/>
body>
html>
obj.cloneNode(bool);
A.replaceChild(new,old);
HTML属性 *** 作，指的是使用JavaScript来 *** 作一个元素的HTML属性。如下面的input元素，HTML属性 *** 作指的就是 *** 作它的id、type、value等，其他元素也类似。
JS *** 作HTML元素属性
获取HTML属性值设置HTML属性值JS *** 作HTML元素属性的方式
对象属性对象方法 2.1 HTML属性 *** 作 2.1.1 对象属性获取HTML属性值—通过属性名来找到属性对应的值
语法： obj.attr
说明： obj是元素名，它是一个DOM对象。所谓的DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取的元素节点。
attr是属性名，对于一个对象来说，可以通过点运算符（.）来获取它的属性值。
设置HTML属性值
语法：obj.attr = “值”;
说明：obj是元素名，它一个DOM对象，attr是属性名。
对象属性的方法，obj.attr， 只能获取元素中的固有属性，即HTML元素中本来就有的属性，不能获取自定义的属性。自定义属性，即我们自己定义的属性，如添加一个 data=“好好学习”，这种元素中本来没有的属性，对象属性的方法就不能用，只能使用对象方法来获取。
对象方法有：
getComputedStyle(obj).attr 获取CSS元素属性值
语法：getComputedStyle(obj).attr
例如： alert(getComputedStyle(oBox).backgroundColor);
getComputedStyle()方法其实有两种写法：getComputedStyle(obj).attr和getComputed Style(obj)["attr"]。
凡是对象的属性都有这两种写法，如oBtn.id可以写成oBtn["id"]，document.getElementById("btn")可以写成document["getElementById"]("btn")，以此类推
（1）语法： obj.style.attr = "值"; obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。
obj.style.attr 等价于obj.style["attr"]，如oDiv.style.width等价于oDiv.style["width"]。
例如： oBox.style.backgroundColor = "lightskyblue";
（2）对于复合属性（如border、font等）来说， *** 作方式也是一样的，举例如下。
oBox.style.border = "2px solid blue";
（3）可以使用cssText属性来同时设置多个CSS属性，这也是在元素的style属性中添加的。
obj表示DOM对象，cssText的值是一个字符串。
oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";
DOM遍历就是查找元素。
（1）查找父元素 obj.parentNode;
oTd[i].onclick = function()
{
var oParent = this.parentNode; #this表示当前对象/元素
oParent.style.color="white";
}
(2)查找子元素
childNodes、firstChild、lastChild（不常用）
children、firstElementChild、lastElementChild（常用）
childNodes获取的是所有的子节点。注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<script>
window.onload = function()
{
var oUl = document.getElementById("list");
var chirldNodesLen = oUl.childNodes.length;
var childrenLen = oUl.children.length;
alert("childNodes的长度为：" + childNodesLen + "\n" + "children的长度为：” + childrenLen)
}
script>
<body>
<ul id="list">
<li>HTMLli>
<li>CSSli>
<li>Javasriptli>
ul>
body>
html>
childNodes包括3个子元素节点和4个子文本节点。每一个li元素都处于不同行，每一个换行符都是一个空白节点，JavaScript会把这些空白节点当成文本节点来处理.
因此， children.length获取的是元素节点的长度，返回结果为3，childNodes.length获取的是子节点的长度，返回结果是7.
oUl.removeChild(oUl.lastElementChild); #删除元素节点
oUl.removeChild(oUl.lastChild); #删除节点，空白文本节点或元素节点
(3)查找兄弟元素
previousSibling、nextSibling（不常用）
previousElementSibling、nextElementSibling（常用）
#查找第二个子元素的前面一个兄弟元素节点
var preElement = oUl.children[2].previousElementsSibling;
#删除该元素节点
oUl.removeChild(preElement);
innerHTML属性很方便地获取和设置一个元素的“内部元素”
innerText属性获取和设置一个元素的“内部文本”。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
window.onload = function()
{
document.body.innerHTML = '' ;
}
script>
head>
<body>
body>
html>
innerHTML获取的是元素内部所有的内容，而innerText获取的仅仅是文本内容
3 事件基础（1）鼠标事件
（2）键盘事件
（3）表单事件
（4）编辑事件
（5）页面事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
function alertMet()
{
alert("知之为知之，不知为不知，是知也");
}
script>
head>
<body>
<input type="button" onclick="alertMet()" value="d出">
body>
html>
#或直接写为：
<input type="button" onclick="alert('知之为知之，不知为不知，是知也')" value="d出">
我们可以为任何元素添加鼠标单击事件！
案例：统计输入字符的长度
实现原理：每输入一个字符，我们都需要敲击一下键盘；每次输入完成，也就是松开键盘时，都会触发一次onkeyup事件此时计算字符串的长度。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
window.onload = function(){
var oTxt = document.getElementById("txt");
var oNum = document.getElementById("num");
oTxt.onkeyup = function()
{
var str = oTxt.value;
oNum.innerHTML = str.length;
};
}
script>
head>
<body>
<input type="text" id="txt"/>
<div>字符串长度为：<span id="num">0span>div>
body>
html>
并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有两种。
▶ 表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）。
▶ 超链接。
判断一个元素是否具有焦点很简单，我们打开一个页面后按【Tab】键，能够选中的就是具有焦点特性的元素。
案例：单行文本框搜索框，在文本框中没有输入值的时候，当失去焦点的时候，提示文字就会出现。当有输入文本内容时，获得焦点时，文本框的值为保留的输入值。
DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
window.onload = function(){
var oSearch = document.getElementById("search");
var oBtn = document.getElementById("btn");
// 获取焦点
oSearch.onfocus = function() {
if(this.value =="百度一下，你就知道")
{
this.value = "";
}
};
// 失去焦点
oSearch.onblur = function(){
if(this.value == "")
{
this.value = "百度一下，你就知道"
}
};
}
script>
head>
<body>
<input type="text" id="search" value="百度一下，你就知道">
<input type="button" id="btn" value="搜索">
body>
html>
补充：自动获取焦点的方法： obj.focus()
3.4.2 onselect 属性文本框内容设置：
单行文本框的内容：在value属性中设置
多行文本框内地：在标签中设置
举例：当选择文本框内容时出现提示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
window.onload = function(){
var oTxt1 = document.getElementById("txt1");
var oTxt2 = document.getElementById("txt2");
oTxt1.onselect = function(){
alert("你选中了单行文本框的内容");
};
oTxt2.onselect = function(){
alert("你选中了多行文本框的内容");
};
}
script>
head>
<body>
<input type="text" id="txt1" value="单行文本框的内容在value属性中设置"><br />
<textarea id="txt2" cols="20" rows="5">多行文本框的内容是在标签中设置的，这一点一定要记住textarea>
body>
html>
需要区别的是，select()方法，是一个方法，onselect是一个属性，它是用于事件 *** 作的。select()方法表示，点击文本框时，自动帮我们把文本框内的内容全选中。语法： obj.select();
3.4.3 onchange属性 具有多个选项的表单元素（1）单选框选择某一项时触发
（2）复选框选择某一项时触发
（3）下拉列表项选择某一项时触发
案例1：
DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
window.onload = function(){
// getElementsByName获取的是一个类数组，要用for循环遍历
var oFruit = document.getElementsByName("fruit");
var oP = document.getElementById("content");
for (var i=0; i<oFruit.length;i++)
{
oFruit[i].onchange = function()
{
if(this.checked)
{
oP.innerHTML = "你选择的是：" + this.value
}
};
}
}
script>
head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果"/>label>
<label><input type="radio" name="fruit" value="香蕉" />label>
<label><input type="radio" name="fruit" value="西瓜">label>
div>
<div>
<p id="content">你选择的是：p>
div>
body>
html>
复选框
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oSelectAll = document.getElementById("selectAll");
var oFruit = document.getElementsByName("fruit");
oSelectAll.onchange = function () {
//如果选中，即this.checked返回true
if (this.checked) {
for (var i = 0; i < oFruit.length; i++) {
oFruit[i].checked = true;
}
} else {
for (var i = 0; i < oFruit.length; i++) {
oFruit[i].checked = false;
}
}
};
}
script>
head>
<body>
<div>
<p><label><input id="selectAll" type="checkbox"/>全选/反选：label>p>
<label><input type="checkbox" name="fruit" value="苹果" />苹果label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜label>
div>
body>
html>
下拉列表
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oList = document.getElementById("list");
oList.onchange = function () {
var link = this.options[this.selectedIndex].value;
window.open(link);
};
}
script>
head>
<body>
<select id="list">
<option value="https://music.163.com">网易云option>
<option value="https://www.epubit.com">异步社区option>
<option value="http://www.ptpress.com.cn">人邮官网option>
select>
body>
html>
onselectstart 防止页面内容被选取
oncontextmenu 禁止鼠标右键
3.6 页面事件 onload： 表示文档加载完成后再执行的一个事件
onbeforeunload：离开页面之前触发的一个事件
4 事件进阶 4.1事件监听器
在Javascript中，如果要给元素添加一个事件，可采用以下两种方式。
▶ 事件处理器 obj.onclick = function () {……};
▶ 事件监听器 obj.addEventListener(“click”, function () {……);}, false);
前面学的给元素添加事件的方式就是时间处理器的方式，这种方式不能为一个元素添加多个相同的事件。为一个元素添加多个相同的事件，需要用事件监听器的方式。
事件监听器”，指的是使用addEventListener()方法为一个元素添加事件，我们又称之为“绑定事件”
obj.addEventListener(type , fn , false)
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.addEventListener("click", alertMes, false);
#function为具体函数如alertMes，需要定义一下
function alertMes() {
alert("JavaScript");
}
}
script>
head>
<body>
<input id="btn" type="button" value="按钮"/>
body>
html>
解绑事件：
obj.removeEventListener(type , fn , false);
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oP = document.getElementById("content");
var oBtn = document.getElementById("btn");
//为p添加事件
oP.addEventListener("click", changeColor, false);
//点击按钮后，为p解除事件
oBtn.addEventListener("click", function () {
oP.removeEventListener("click", changeColor, false);
}, false);
function changeColor() {
this.style.color = "hotpink";
}
}
script>
head>
<body>
<p id="content">绿叶学习网p>
<input id="btn" type="button" value="解除" />
body>
html>
removeEventListener()方法只能解除“事件监听器”添加的事件，不能解除“事件处理器”添加的事件。如果想要解除“事件处理器”添加的事件，需要借助“obj.事件名 = null;”来实现；
4.2 this对象哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象
记住，在事件函数中，想要使用当前元素节点，我们尽量使用 this 来代替oBtn、oLi[i] 等等这种DOM对象的写法。
当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。每一个事件，都有一个对应的event对象.
5. window对象 在JavaScript中，一个浏览器窗口就是一个window对象。一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。window对象及其子对象：window对象及下面这些location、navigator等子对象，由于都是用于 *** 作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）window对象的常用方法:对于window对象，无论是它的属性，还是方法，都可以省略window前缀。如window.alert()可以简写为alert()，window.open()可以简写为open()，甚至window.document.getElementById()可以简写为document.getElementById()，5.1 窗口 *** 作
在JavaScript中，窗口常见的 *** 作有两种：一种是“打开窗口”，另一种是“关闭窗口”.打开窗口和关闭窗口，在实际开发中经常用到。
5.1.1 打开窗口 语法： window.open(url, target);说明：url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面；target表示打开方式，它的取值根a标签中target属性的取值是一样的，常用取值有两个：_blank (默认值，表示在新窗口中打开) 和 _self（表示在当前窗口中打开）
举例：打开一个空白窗口：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
// 打开一个空白窗口，这个 *** 作的意义在于，可以把这个空白窗口赋值给一个变量，
// 这个变量也是一个window对象，获取该对象，即可对这个页面进行 *** 作。
var opener = window.open();
// 新窗口下面有document子对象，借助document.write()方法来输出一个文本
opener.document.write("这是一个新的窗口");
// 为新窗口设置样式
opener.document.body.style.backgroundColor = "red";
};
}
script>
head>
<body>
<input type="button" id="btn" value="获取">
body>
html>
该方法不接收任何的参数。
举例：实现打开一个新窗口，然后关闭该新窗口
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var btnOpen = document.getElementById("btn_open");
var btnClose = document.getElementById("btn_close");
// 先创建一个空白变量
var opener = null;
btnOpen.onclick = function () {
opener = window.open("http://www.lvyestudy.com");
};
btnClose.onclick = function () {
// 关闭新打开的窗口
opener.close();
}
}
script>
head>
<body>
<input id="btn_open" type="button" value="打开新窗口" />
<input id="btn_close" type="button" value="关闭新窗口" />
body>
html>
JavaScript中，对话框有3种:
alert() 只用于提示文字，记住一点：在alert()中实现文本换行，用的是\n alert("HTML\nCSS\nJavaScript");
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
if (confirm("确定要跳转到绿叶首页？")) {
window.location.href = "http://www.lvyestudy.com";
} else {
document.write("你取消了跳转");
}
};
}
script>
head>
<body>
<input id="btn" type="button" value="回到首页"/>
body>
html>
DOCTYPE html>
<html>
<head>
<title>title>
<meta charset="utf-8" />
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
var name = prompt("请输入你的名字");
document.write("欢迎来到" + name + "");
};
}
script>
head>
<body>
<input id="btn" type="button" value="按钮"/>
body>
html>
指的是每隔一段时间就执行一次代码。
▶ setTimeout()和clearTimeout()。
在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。
setTimeout(code, time);
参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script>
window.onload = function()
{
// 第一种：第一个参数是一段代码
setTimeout('alert("你已经看了2秒钟了")', 2000);
// 第二种：第一个参数是一个函数
setTimeout(function(){
alert("你已经看了2秒钟了")
}, 2000);
// 第三种：第一个参数是一个函数名
setTimeout(alertMet, 200);
// 定义一个函数，在函数内部d出一个对话框
function alertMet()
{
alert("你已经看了2秒钟了")
}
}
script>
head>
<body>
<p>2秒后提示p>
body>
html>
▶** setInterval和clearInterval()。**
使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()
setInterval(code, time);
setInterval()跟setTimeout()语法是一样的，唯一不同的是setTimeout()只执行一次，而setInterval()可以重复执行无数次
document对象其实是window对象下的一个子对象，它 *** 作的是HTML文档里所有的内容.
document是浏览器为每个窗口内的HTML页面创建的对象。通过document对象，我们可以 *** 作页面的元素，这些 *** 作又被统称为“DOM（文档对象模型）”.
由于window对象是包括document对象的，所以我们可以“简单”地把BOM和DOM的关系理解成BOM包含DOM
document.forms、document.images、document.links这3个分别等价于下面3个，所以我们一般用document.getElementsByTagName来获取就行了，不需要记忆。
var url = document.URL;
document.write(url);
document.write()不仅可以输出文本，还可以输出标签。
document.write()都是在body标签内输出内容的。
document.writeln("js") 等同于 document.write("js\n");
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）