什么是JavaScript？
Javascript是一种基于对象（Object）和事件驱动（ Event Driven）并具有安全性能的脚本语言，是一门弱类型语言，用来与HTML交互操作，并且完成丰富的页面交互效果。
一，Javascript基本语法
1.Javascript引入
引入JavaScript的方式
1.在html文件中插入js代码，需要在<script></script>标签对中编写js代码，可以放在head和 body中
2.外部文件引入
js代码放在js文件中，在html文件中使用<script src="文件路径"></srcipt>引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/index.js"></script>
</head>
<body>
<!-- script是js代码的环境
<script>
alert("hello word")
</script> -->
</body>
</html>
2.数据类型
原始数据类型(基本数据类型)：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。 字符串 "abc" "a" 'abc' "asdd'fg'hhh"
3. boolean: true和false true：非零的数值、非空字符串、非空对象 false：零、空字符串、null、undefined
4. null：一个对象为空的占位符，其类型为object
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
引用数据类型：
对象,array,function,Date......
2.1基础数据类型
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
// var a = 1.0;
// alert(typeof a);
// a = 'abc';
// alert(typeof a);
// a = false;
// alert(typeof a);
// a = null;
// alert(typeof a);
// var a;
// alert(typeof a);
// var a = NaN;
// alert(typeof a);
// var p = new Object();
// p.name = "张三";
// p.age = 20;
// alert(p.name + "_" + p.age);
// var arrs = new Array();
// arrs[0] = 1;
// arrs[1] = 2;
// alert(arrs);
var arrs1 = [1,2,3];
alert(arrs1);
var myCars=new Array("Saab","Volvo","BMW");
alert(myCars);
</script>
</body>
</html>
<!
javascript是弱类型语言，变量的类型由后面赋的值的类型决定
>2.2 Array对象
数组对象，提供了数组操作方面的属性和方法：
length属性：动态获取数组长度。如：var len = arrObj.length
join()：将一个数组转成字符串。返回一个字符串。语法：arrObj.join(连 接号)
reverse()：将数组中各元素颠倒顺序，语法：arrObj.reverse()
pop()：删除数组中最后一个元素，返回删除的那个值，并将长度减1。
shift()：删除数组中第一个元素，返回删除的那个值，并将长度减1。
unshift()：往数组前面添加一个或多个数组元素，长度要改变。 arrObj.unshift(“a” , “b” , “c”) push()：往数组结尾添加一个或多个数组元素，长度要改变。 arrObj.push(“a” , “b” , “c”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
数组操作
-->
<script>
var arrs = ["hello","world",20,false];
console.log(arrs.length);
//数组转字符串，默认以英文逗号分割，也可以在括号里自定义分隔符
var s = arrs.join();
console.log(s);
//数组反转
var res = arrs.reverse();
console.log(res);
//取最后一个元素，从数组删除
var pop = arrs.pop();
console.log(pop);
console.log(arrs);
//添加元素
arrs.push("hello");
console.log(arrs);
//取第一个元素，从数组删除
var shift = arrs.shift();
console.log(shift);
console.log(arrs);
//往第一个位置添加元素
arrs.unshift(true);
console.log(arrs);
</script>
</head>
<body>
</body>
</html>2.3 Date对象
日期时间对象，可以获取系统的日期时间信息。必须使用new关键字来创建，否则，无法调用Date对 象的属性和方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var date = new Date();
console.log(date);
//年
var year = date.getFullYear();
console.log(year);
//月
var month = date.getMonth() + 1;
if(month <10){
month = "0" + month
}
console.log(month);
//日
var day = date.getDate();
if(day <10){
day = "0" + day
}
console.log(day);
//小时
var hour = date.getHours();
if(hour <10){
hour = "0" + hour
}
console.log(hour);
//分
var minute = date.getMinutes();
if(minute <10){
minute = "0" + minute
}
console.log(minute);
//秒
var second = date.getSeconds();
if(second <10){
second = "0" + second
}
console.log(second);
var time = year + "-" + month + "-" +day + " " + hour +":"+ minute + ":" + second
console.log(time)
</script>
</head>
<body>
</body>
</html>2.4String字符串对象
length：获取字符串的长度。如：var len = strObj.length
toLowerCase()：将字符串中的字母转成全小写。如：strObj.toLowerCase()
toUpperCase()：将字符串中的字母转成全大写。如：strObj.toUpperCase()
charAt(index)：返回指定下标位置的一个字符。如果没有找到，则返回空字符串。
substr(a,b)：截取字符串，从a开始，指定数目b个字符 左闭右闭
substring(a,b)：截取字符串，从a开始，到b结束，左闭右开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
字符串操作
-->
<script>
var s = "Hello World";
//打印长度
console.log(s.length);
//转小写
console.log(s.toLowerCase());
//转大写
console.log(s.toUpperCase());
//索引截取
var c = s.charAt(7);
console.log(c);
//截取范围字符 左闭右闭
var a = s.substr(1,4);
console.log(a);
//截取范围字符 左闭右开
var b = s.substring(1,7);
console.log(b);
</script>
</head>
<body>
</body>
</html>2.5 Math对象
Math对象是一个静态对象，换句话说：在使用Math对象，不需要创建实例。
Math.PI：圆周率。
Math.abs()：绝对值。如：Math.abs(9) = 9
Math.ceil()：向上取整(整数加1，小数去掉)。如：Math.ceil(10.2) = 11
Math.floor()：向下取整(直接去掉小数)。如：Math.floor(9.888) = 9
Math.round()：四舍五入。如：Math.round(4.5) = 5; Math.round(4.1) = 4
Math.pow(x,y)：求x的y次方。如：Math.pow(2,3) = 8
Math.sqrt()：求平方根。如：Math.sqrt(121) = 11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<script language="JavaScript">
var a = Math.PI;
console.log(a);
var b = Math.ceil(12.1);
console.log(b);
var c = Math.floor(12.1);
console.log(c);
var d = Math.round(12.1);
console.log(d);
var e = Math.round(12.5);
console.log(e);
var f = Math.pow(10,2);
console.log(f);
var g = Math.sqrt(100);
console.log(g);
</script>
</head>
<body>
</body>
</html>
3. 三等号===，双等号==
1. ”==”表示：equality ->等同的意思，”==”使用两个等号时，如果两边值的类型不同的时候，是要先进行类型转换后，才能做比较，比较值。
2. “===”表示：identity -> 恒等的意思，“===”使用三个等号时，是不需要做类型转换的，如果两边值的类型不同，就表示一定是不等的，比较地址值。
<script>
var i = 1;
var j = "1";
console.log(i==j); //控制台打印true
console.log(i===j); //控制台打印false
</script>二，函数
JavaScript函数的分类：
1. 自定义函数(我们自己编写的函数)，如：function funName(){}
2. 系统函数(JavaScript自带的函数)，如alert函数。
1.自定义函数
函数的定义方法：
1. 函数声明
function functionName(parameters) { 执行的代码 }函数的调用方式:
var result = functionName(实际参数...); 或者functionName(实际参数...);2. JavaScript 函数可以通过一个表达式定义，即匿名函数：
var x = function (a, b) {
return a * b
};
var y = x(1,3);函数返回值：
1. 当函数无明确返回值时，返回的值就是"undefined"。
2. 当函数有返回值时，返回值是什么就返回什么。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
<script language="JavaScript">
function add(a, b) {
if (!isNaN(a) && !isNaN(b)) {
return a + b;
} else {
alert("输入的数字非法");
}
}
var r = add();
alert(r);
r = add(1);
alert(r);
r = add(1, 2);
alert(r);
r = add(1, 2, "jim");
alert(r);
r = add(1, 2, 3, 4, "jim");
alert(r);
</script>
</head>
<body>
</body>
</html>
<!
在同一个函数中可以有返回值，也可以没有返回值
函数中的参数可以不传，也可以传一个、传两个...，函数会自动按顺序匹配
>2.内置弹窗函数
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示输入框。
2.1警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
window.alert("sometext");2.2.确认框
确认框通常用于验证是否接受用户操作。
当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。 当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。
var x = confirm("确认删除该条记录？");
if (x) {
alert("删除成功");
} else {
alert("取消删除");
}2.3 提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。 如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null
var x = prompt("请输入姓名");
if (x) {
document.write(x);
} else {
alert("取消");
}
3.作用域
作用域即变量，分为全局变量以及局部变量
局部变量：在方法内或者代码块内定义的变量具有局部作用域
全局变量：在方法外部定义的变量具有全局作用域
局部变量如果不用var修饰会自动提为全局变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//全局变量
var a = "hello";
function printf(){
//局部变量
var b = "world";
return b;
}
// printf();
// console.log(a);
// console.log(b);
window.sessionStorage.setItem("userName","zhangsan");
var s = sessionStorage.getItem("userName");
console.log(s);
</script>
</head>
<body>
</body>
</html>四，浏览器内置对象
1.window对象
window对象是js的一个内置对象，所有浏览器都支持window对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
1.1window对象属性
1.2对象方法
2.window时钟函数
setTimeout() : 在指定的毫秒数后调用函数或计算表达式，会返回一个ID值
clearTimeout()：方法可取消由 setTimeout() 函数设定的定时执行操作,方法的参数必须是由 setTimeout() 返回的 ID 值。
setInterval():可按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval() ：方法可取消由 setInterval() 函数设定的定时执行操作,方法的参数必须是由 setInterval() 返回的 ID 值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var id;
function myTimeout(){
id = setTimeout(function(){
alert("timeOut");
},1000);
}
function myClear(){
clearTimeout(id);
}
var res;
function myInterval(){
res = setInterval(function(){
alert("interval");
},3000);
}
function myClearInterval(){
alert("取消成功");
clearInterval(res);
}
</script>
</head>
<body>
<button id="btn1" onclick="myTimeout();">延迟执行</button>
<button id="btn2" onclick="myClear();">取消执行</button>
<button id="btn3" onclick="myInterval();">周期执行</button>
<button id="btn4" onclick="myClearInterval();">取消周期执行</button>
</body>
</html>3.Window窗体方法
open()：打开窗体
close()：关闭窗体
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
</head>
<body>
<button id="btn1" onclick="openwindow()">打开新窗口</button>
<button id="btn2" onclick="closewindow()">关闭窗口</button>
<script>
var mywindow;
function openwindow() {
mywindow = window.open("http://www.baidu.com");
}
function closewindow() {
mywindow.close();
}
</script>
</body>
</html>2. history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
对象方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
console.log(history.length);
function myForward(){
history.forward();
}
</script>
</head>
<body>
<a href="js_demo09.html">跳转</a>
<button onclick="myForward();">前进</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function myBack(){
history.back();
}
</script>
</head>
<body>
<button onclick="myBack();">后退</button>
</body>
</html>3.location对象
Location 对象包含有关当前 URL 的信息。 Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
location对象属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//IP地址
console.log(location.host);
//主机名
console.log(location.hostname);
//端口号
console.log(location.port);
//获取协议
console.log(location.protocol);
//完整地址
console.log(location.href);
}
</script>
</head>
<body>
</body>
</html>对象方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title></title>
</head>
<body>
<button onclick="flushpage()">刷新页面</button>
<script>
function flushpage() {
window.location.reload();
}
</script>
</body>
</html>
五，事件处理
事件 Event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件源
在事件中，当前操作的那个元素就是事件源。比如网页元素中a标签和input都有onclick事件，当点击a发生onclick 事件时，事件源就是a标签，当点击input发送onclick事件时，事件源就是input。
事件处理函数
监听到事件源产生的事件后会进行的操作就是事件处理函数
1.事件
重点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
focus:元素获取焦点事件
blur:元素失去焦点事件
dblclick:鼠标双击某个对象
-->
<script>
function myFocus(obj){
obj.style.backgroundColor = "bule";
}
function myBlur(obj){
obj.style.backgroundColor = "yellow";
}
function mydblclick(obj){
obj.style.backgroundColor = "red";
}
</script>
</head>
<body>
<input type="text" name="userName" onfocus="myFocus(this);" ondblclick="mydblclick(this);" onblur="myBlur(this);"/>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
mouseover:鼠标悬停在某个元素上产生的事件
mouseout:鼠标离开某个元素产生的事件
mouseenter：鼠标悬停在某个元素上产生的事件
mouseleave:鼠标离开某个元素产生的事件
mouseover、 mouseout有事件传递的效果，父元素绑定的事件会传递到子元素上
mouseenter、 moueLeave没有事件传递的效果，只在绑定元素上起作用
-->
<style>
#div1{
width: 200px;
height: 200px;
border: 1px solid red;
background-color: red;
}
#div2{
width: 100px;
height: 100px;
background-color: aliceblue;
margin: 50px;
}
</style>
<script>
function myover(obj){
console.log("over");
}
function myout(obj){
console.log("out");
}
</script>
</head>
<body>
<!-- <div id="div1" onmouseover="myover(this);" onmouseout="myout(this);">
<div id="div2"> </div>
</div> -->
<div id="div1" onmouseenter="myover(this);" onmouseleave="myout(this);">
<div id="div2"> </div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//文档就绪事件，当文档完成加载之后触发该事件
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var p1 = document.getElementById("p1");
p1.style.color = "red";
}
btn.onclick = function(){
var p1 = document.getElementById("p1");
p1.style.color = "blue";
}
}
</script>
</head>
<body>
<p id="p1">段落1</p>
<button id="btn" onclick="btn">确定</button>
</body>
</html>使用Submit实现表单提交，返回提交输入的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
margin: 0px;
}
.main {
width: 100%;
font-family: "方正舒体";
}
.top {
width: 100%;
height: 20px;
background-color: aliceblue;
}
.center {
width: 100%;
height: 20px;
}
.sp {
height: 18px;
font-size: 25px;
margin-top: 3px;
}
.sp1 {
border-bottom: 5px solid aqua;
}
.bottom {
width: 100%;
height: 600px;
margin-top: 30px;
margin-left: 50px;
font-size: 20px;
}
input {
margin-top: 20px;
border-radius: 5px;
}
.inp {
width: 300px;
height: 20px;
border: 2px solid aqua;
}
select {
width: 120px;
height: 30px;
margin-top: 5px;
border-radius: 5px;
font-family: "方正舒体";
border: 2px solid aqua;
}
textarea {
margin-top: 15px;
border-radius: 5px;
border: 2px solid aqua;
}
button {
width: 80px;
height: 30px;
margin-top: 15px;
margin-left: 40px;
background-color: aqua;
border-radius: 3px;
font-family: "方正舒体";
font-size: 20px;
border: 2px solid aqua;
}
button:hover {
background-color: darkgrey;
color: aqua;
}
</style>
<script>
window.onload = function() {
var form = document.getElementById("form");
form.onsubmit = function() {
// alert('账号：'+ testform.userName.value +'\n' + '密码：' + testform.pwd.value+'\n' + '性别：' + testform.sex.value
// +'\n' + '爱好：' + testform.hobby.value +'\n' + '星座：' + testform.star.value+'\n' + '备注：' + testform.remark.value)
var x = confirm('账号：' + testform.userName.value + '\n' + '密码：' + testform.pwd.value + '\n' + '性别：' +
testform.sex.value +
+ '\n' + '爱好：' + testform.hobby.value + '\n' + '星座：' + testform.star.value + '\n' + '备注：' +
testform.remark.value)
if (x) {
alert("注册成功")
} else {
alert("注册失败")
}
}
}
</script>
</head>
<body>
<div class="main">
<div class="top">
<span><b>位置：</b>首页 -> 表单</span>
</div>
<div class="center">
<div class="sp">
<span class="sp1"><b>注册信息</b></span>
</div>
<hr />
</div>
<div class="bottom">
<form id="form" name="testform" action="#">
账号:<input class="inp" type="text" name="userName" placeholder="请输入账号" /><br />
密码:<input class="inp" type="password" name="pwd" placeholder="请输入密码" /><br />
性别:<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女<br />
爱好:<input type="checkbox" name="hobby" value="basketball" />篮球
<input type="checkbox" name="hobby" value="football" />足球
<input type="checkbox" name="hobby" value="dance" />跳舞<br />
星座:<select name="star">
<option value="白羊座">白羊座</option>
<option value="巨蟹座">巨蟹座</option>
<option value="狮子座">狮子座</option>
<option value="处女座">处女座</option>
</select><br />
备注:<textarea name="remark" rows="5" cols="50"></textarea><br />
<button id="btn">注册</button>
</form>
</div>
</div>
</body>
</html>
2.JS实现绑定事件监听的几种方法
1 行内绑定
在HTML的标签中通过onclick等属性进行绑定，绑定方式：on+事件名，在将所触发的事件赋值给该属性，如下：
<button onclick="alert('123');">点击</button>2 使用element.onclick进行事件绑定
通过操作DOM元素，为DOM绑定事件（使用形式同行内绑定）
3 使用addEventListener() 方法
使用 addEventListener() 方法，接受3个参数（要处理的事件名、作为事件处理程序的函数、一个布尔值 useCapture：布尔值，可选，默认为false，事件是从内向外捕获，true：事件从外向内捕获 当同一个标签绑定两 个相同的事件，则会顺序执行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
dom对象.on事件：当对象绑定了多个相同事件时，只有最后一个会被触发
dom对象.addEventListener事件：当对象绑定了多个相同事件时，每个事件都会被触发一个会被触发
-->
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
console.log("red");
});
btn.addEventListener("click",function(){
console.log("yellow");
});
}
</script>
</head>
<body>
<p id="p1">段落1</p>
<button id="btn">确定</button>
</body>
</html>六，DOM编程
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。 换句话说，这是表示和处理一个HTML或XML文档的常用方法。
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的， 而是将HTML页面中的每一个标记按 照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。
1.DOM树的节点层次
HTML网页是可以看做是一个树状的结构，如下：
<html>
<head>
<title>www.baidu.com</title>
</head>
<body>
<h1>DOM学习</h1>
<a href="www.baidu.com">baidu</a>
</body>
</html>
DOM树是由DOM元素和属性节点组成的层级结构
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以 创建或删除节点。
使用DOM对象的方法就是去做以下的操作：
1. 更新：更新DOM节点，比如给某个标签元素增加style
2. 遍历DOM节点：得到DOM节点
3. 删除：删除一个DOM阶段
4. 添加：添加一个新的节点
2.获得DOM节点
getElementsByTagName:通过标签名获取元素对象，返回的是集合
getElementById：通过元素的id值获取元素的对象，返回的是一个对象
getElementsByClassName:通过元素的class属性获取元素对象，返回的是集合
getElementsByName:是通过元素的name属性获取元素对象，返回的是集合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var p = document.getElementsByTagName("p");
console.log(p);
for( var i = 0; i < p.length; i++){
console.log(p[i].innerHTML);
}
}
btn.onclick = function(){
var p = document.getElementsByClassName("a1");
console.log(p);
}
btn.onclick = function(){
var p = document.getElementsByName("p1");
console.log(p);
}
}
</script>
</head>
<body>
<p class="a1" name = "p1">段落1</p>
<p>段落2</p>
<button id="btn">确定</button>
</body>
</html>其他属性
children:获取当前元素下的所有子元素节点
childNodes：获取当前元素下的子节点，不只是元素节点，还有文本节点
firstChild:获取当前节点的第一个子节点
firstElementChild：获取当前节点的第一个元素节点
lastChild：获取当前节点的最后一个子节点
lastElementChild：获取当前节点的最后一个元素节点
parentNode：获取当前节点的父节点
parentElement：获取当前节点的父元素节点
nextElementSibling:获取当前元素的下一个兄弟元素节点
previousElementSibling：获取当前元素的上一个兄弟元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var div = document.getElementById("div1");
// console.log(div.children);
// console.log(div.childNodes);
// console.log(div.firstChild);
// console.log(div.firstElementChild：);
// console.log(div.lastChild);
// console.log(div.lastElementChild);
// console.log(div.parentNode.parentNode.parentNode);
console.log(div.parentElement);
var p2 = document.getElementById("p2");
console.log(p2.nextElementSibling);
console.log(p2.previousElementSibling);
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">dd</p>
<p id="p2">dd</p>
<p id="p3">dd</p>
</div>
</body>
</html>3.更新节点
3.1更新文本节点
innerHTML：当插入有标签元素时会被解析到DOM树里
innerText：当插入标签元素时，只会被当作普通文本，不会被解析到DOM树里
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
var p1 = document.getElementById("p1");
console.log(p1.innerHTML);
console.log(p1.innerText);
// p1.innerHTML = "<span>bb</span>";
p1.innerText = "bb";
}
}
</script>
</head>
<body>
<p id="p1">aa</p>
<button id="btn">确定</button>
</body>
</html>3.2.更新节点的属性
元素节点设置属性：使用元素节点的setAttribute方法来为该元素节点设置一条属性。
该方法接收两个参数，第一个参数为属性名，第 二个参数为属性值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.fon20{
font-size: 20px;
}
</style>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
var p1= document.getElementById("p1");
p1.setAttribute("title","p标签");
p1.setAttribute("title","这是一个p标签");
p1.setAttribute("class","fon20");
}
}
</script>
</head>
<body>
<p id="p1">aa</p>
<button id="btn">确定</button>
</body>
</html>3.3更新元素节点的style属性
直接访问元素节点内的style属性来进行更改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
var p1= document.getElementById("p1");
p1.style.fontSize="30px";
p1.style.color="red";
p1.style.backgroundColor = "blue";
}
}
</script>
</head>
<body>
<p id="p1">aa</p>
<button id="btn">确定</button>
</body>
</html>4.删除节点
children:删除父元素下指定的元素
remove：删除自身元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
// var p1= document.getElementById("p1");
// p1.removeChild(p1.children[0]);
var span = document.getElementById("span2");
span.remove();
}
}
</script>
</head>
<body>
<p id="p1">
<span>span1</span>
<span id="span2">span2</span>
</p>
<button id="btn">确定</button>
</body>
</html>5.插入节点
1.创建新的 HTML 元素 (节点) - appendChild()
使用appendChild()方法可以在父节点内创建一个子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
var div1 = document.getElementById("div1");
//创建新节点
var p = document.createElement("p");
var node = document.createTextNode("aaa");
p.appendChild(node);
//插入新节点
div1.appendChild(p);
}
}
</script>
</head>
<body>
<div id="div1">
<p>pp</p>
</div>
<button id="btn">确定</button>
</body>
</html>2.创建新的 HTML 元素 (节点) - insertBefore()
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
//创建新节点
var p1 = document.createElement("p");
var node = document.createTextNode("aaa");
p1.appendChild(node);
//把p1插入p2节点的前面
var div1 = document.getElementById("div1");
var p2 = document.getElementById("p2");
//insertBefore方法的调用者是父元素，第一个参数是新节点，第二个参数是指定元素
div1.insertBefore(p1,p2);
}
}
</script>
</head>
<body>
<div id="div1">
<p id="p2">pp</p>
</div>
<button id="btn">确定</button>
</body>
</html>insertBefore()可以把已有的元素移动位置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
var div1 = document.getElementById("div1");
var p1 = div1.firstElementChild;
var p2 = div1.lastElementChild
//把p2移动到p1前面
div1.insertBefore(p2,p1);
}
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">pp</p>
<p id="p2">bb</p>
</div>
<button id="btn">确定</button>
</body>
</html>3.doucument.write方法
write() 方法可向文档写入 HTML 表达式或 JavaScript 代码 可列出多个参数(exp1,exp2,exp3,...) ，它们将按顺序被追加到文档中。但之前网页内容会被覆盖清除，不建议用
4.cloneNode(boolean b)方法
cloneNode(boolean b)方法可以创建一个节点的副本，如果参数是 true，它还将递归复制当前节点的所有子孙节 点。否则，它只复制当前节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
var div1 = document.getElementById("div1");
var p2 = div1.lastElementChild;
// var p3 = p2.cloneNode(false);
var p3 = p2.cloneNode(true);
div1.appendChild(p3);
}
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">cc</p>
<p id="p2">pp</p>
</div>
<button id="btn">确定</button>
</body>
</html>5..修改元素节点的innerHTML属性来插入一个新节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload = function(){
var bnt = document.getElementById("btn");
btn.onclick = function(){
/*
innerHTML直接插入新元素会把原来已存在的元素覆盖掉，
所以需要先把原来的元素innerHTML获取到，将新元素拼接到后边，再修改父元素的
innerHTML
*/
var div1 = document.getElementById("div1");
var node = div1.innerHTML;
node = node + "<h1>标题</h1>";
div1.innerHTML = node;
}
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">cc</p>
<p id="p2">pp</p>
</div>
<button id="btn">确定</button>
</body>
</html>
926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
