web前端学习笔记——Day8
十五、js的history对象和location对象
1、History对象
History对象属性
History对象包括用户（在浏览器窗口中）访问过的URL。
History对象是window对象的一部分，可通过window.history属性对其进行访问
length 返回浏览器历史列表中的URL数量。
History对象方法
back() 加载history列表中的前一个URL。
forword() 加载history列表中的下一个URL。
go() 加载history列表中的某个具体页面。
eg：（两个html文件）
（1）
<html>
<head>
<title>js的history对象和location对象title>
head>
<body>
<a href="js2.html">点击a>
<button onclick="history.forward()">》》》》》》》button>
//<button onclick="history.go(1)">》》》》》》》button>
body>
html>
（2）
<html>
<head>
<title>js2title>
head>
<body>
<button onclick="history.back()">backbutton>
//<button onclick="history.go(-1)">backbutton>
body>
html>
2、Locatin对象
Locatin对象包含有关当前URL的信息。
Locatin对象是window对象的一个部分，可通过window.location属性来访问。
Locatin对象方法
location.assign(URL) 加载一个新的页面过来，可以后退
location.reload() 刷新
location.replace(newURL)用一个新的页面替代另一个页面
//注意与assign的区别
<script type="text/javascript">
location.assign("http://www.baidu.com");
location.reload();
location.replace();
</script>
十六、js的DOM节点
13.1什么是DOM？
13.2DOM节点
整个文档是一个文档节点（document）
每个HTML元素是元素节点（element）
HTML元素内的文本是文本节点（text对象）
每个HTML属性是属性节点（attribute）
注释是注释节点（comment对象）
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
1、节点（自身）属性和导航属性
记住：
<html>
<head>
<title>dom eg:title>
head>
<body>
<div class="div1">
<p name="littleP" class="p1">hello pp>
<div class="div2">
hello div
<div>div3div>
<a href="">clicka>
div>
div>
body>
<script type="text/javascript">
var ele=document.getElementsByName("littleP")[0];
var ele2=ele.nextElementSibling;
console.log(ele2.innerHTML);//不只取出文本，还有标签
console.log(ele2.innerText);//只取出文本
ele2.innerHTML="WZQ
"
script>
<html>
<head>
<title>js_domtitle>
head>
<body>
<div class="div1">
<p class="p1">hellp pp>
<div class="div2">hello divdiv>
div>
body>
<script type="text/javascript">
var ele=document.getElementsByClassName("p1")[0];
// console.log(ele.nodeName);//p
// console.log(ele.nodeType);//1
// console.log(ele.nodeValue);//null
// console.log(ele.innerHTML);//hello p
// var p_ele=ele.parentNode;
// console.log(ele.parentNode);
// var b_ele=ele.nextSibling;
// console.log(ele.nextSibling);
var b_ele2=ele.nextElementSibling;
console.log(b_ele2.nodeName);
console.log(b_ele2.innerHTML);
script>
html>
局部查找
<html>
<head>
<title>dom eg:title>
head>
<body>
<div class="div1">
<p name="littleP" class="p1">hello pp>
<span>333span>
<div class="div2">
hello div
<div>div3div>
<a href="">clicka>
<span>111span>
div>
div>
<span>22span>
body>
<script type="text/javascript">
//局部查找
var wzq=document.getElementsByClassName("div1")[0];
var xjy=wzq.getElementsByTagName("span");
console.log(xjy);
console.log(xjy[0].innerHTML);
console.log(xjy[1].innerHTML);
script>
html>
不支持ByID和ByName
2、事件
onfocus和onblur事件
eg：
<html>
<head>
<title>searchtitle>
head>
<body>
<input type="text" id="search" value="请输入用户名" onfocus="f1()" onblur="f2()">
body>
<script type="text/javascript">
var ele=document.getElementById("search");
function f1(){
if (ele.value=="请输入用户名") {
ele.value="";
}
}
function f2(){
if (!ele.value.trim()) {
ele.value="请输入用户名";
}
}
script>
html>
绑定事件
eg：
<html>
<head>
<title>shijainbangd title>
head>
<body>
<div class="div1">
<div class="div2">55555div>
<div class="div2">55555div>
<div class="div2">55555div>
<div class="div2">55555div>
<p id="p1" onclick="func(this)">333333p>
div>
body>
<script type="text/javascript">
//事件绑定
// var ele=document.getElementById("p1");
// ele.οnclick=function(){
// alert(123456);
// }
// var ele2=document.getElementsByClassName("div2")
// for (var i=0;i
// ele2[i].οnclick=function(){
// alert(666);
// }
// }
function func(wzq){
console.log(wzq);
console.log(wzq.previousElementSibling);
console.log(wzq.parentNode);
}
script>
html>
3、onload事件
onload属性开发中只给body元素加。
这个属性的触发标志着页面内容被加载完成。
应用场景：当有些事情我们希望页面加载完成立刻执行，则可以使用该事件属性。
解决了script后加载，或没加载完的情况。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
// window.οnlοad=function(){
// var ele=document.getElementById("ppp");
// ele.οnclick=function(){
// alert(123)
// };
// };
function fun1() {
var ele=document.getElementById("ppp");
ele.onclick=function(){
alert(123)
};
}
script>
head>
<body onload="fun1()">
<p id="ppp">hello pp>
body>
html>
十七、onsubmit事件、Evevt对象、事件传播
1、onsubmit事件
当表单在提交时触发，该属性也只能给form元素使用。
应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。
举例：
<html>
<head>
<title>js_onsubmit事件title>
head>
<body>
<form action="" id="form1">
<input type="text" name="用户名">
<input type="submit" value="提交">
form>
body>
<script type="text/javascript">
var ele=document.getElementById("form1");
ele.onsubmit=function (){
alert("提交成功")
return false //阻止数据发向后端
}
script>
html>
2、Evevt对象
3、事件传播
举例：
<html>
<head>
<title>事件传播title>
<style type="text/css">
.outer{
width: 300px;
height: 300px;
background-color: red;
}
.inner{
width: 100px;
height: 100px;
background-color: yellow;
}
style>
head>
<body>
<div class="outer" onclick="f2()">
<div class="inner">div>
div>
body>
<script type="text/javascript">
var ele=document.getElementsByClassName("inner")[0];
ele.onclick=function (e){
alert("inner");
e.stopPropagation();
}
function f2(){
alert("outer");
}
script>
html>
十八、DOM节点的增删改查和属性设置
1、增删改查演示
1.1node的CURD：
增：
createElement(name) 创建元素
appendChild(); 将元素添加，要找到父节点，通过父节点添加
删：
获得要删除的元素
获得它的父元素
使用removeChild()方法删除
改：
第一种方式：
使用上面增和删结合完成修改
第二种方式：
使用setAttribute();方法修改属性
使用innerHTML属性修改元素的内容
**查：**使用之前介绍方法
<html>
<head>
<title>node的增删改查title>
<style type="text/css">
.div1,.div2,.div3,.div4{
width: 200px;
height: 150px;
}
.div1{
background-color: red;
}
.div2{
background-color: blue;
}
.div3{
background-color: yellow;
}
.div4{
background-color: green;
}
style>
head>
<body>
<div class="div1">
<button onclick="add()">增加button>
hello div1
div>
<div class="div2">
<button onclick="del()">删除button>
hello div2
div>
<div class="div3">
<button onclick="change()">修改button>
<p>hello div3p>
div>
<div class="div4">hello div4div>
body>
<script type="text/javascript">
//增加标签
function add(){
var ele=document.createElement("p");//创建一个标签，但是没有内容
ele.innerHTML="王智强";//给创建的标签添加内容
var father=document.getElementsByClassName("div1")[0];
father.appendChild(ele);
}
//删除标签
function del(){
var father=document.getElementsByClassName("div1")[0];
var sons=father.getElementsByTagName("p")[0];
father.removeChild(sons);
}
//修改标签
function change(){
var img=document.createElement("img");
//首先创建一个标签，用这个创建的标签去修改，但目前img标签什么都没有
img.src="F:/我鱼/1/psbATRLLLMM.jpg";//添加图片路径
var ele= document.getElementsByTagName("p")[0];
//找到要修改的对象
var father=document.getElementsByClassName("div3")[0];//找到父标签
father.replaceChild(img,ele);
//替换，用img替换ele（p）
}
script>
html>
1.2修改 HTML DOM
（1）、改变HTML内容
改变元素内容的最简单的方法时是使用innerHTML和innerText。
（2）、改变css样式
hello world
document.getElementById("p2").style.color="blue";
.sstyle.fontSize("10px")
（3）、改变HTML属性
elementNode.setAttribute(name,value)
elementNode.setAttribute(name)<--------->elementNode.value(DHTML)
（4）、创建新的HTML元素
cerateElement(name)
（5）、删除已有的HTML元素
elementNode.removeChild(node)
（6）、关于class的操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
举例：
<html>
<head>
<title>js_classtitle>
head>
<body>
<div class="div1 div2">wzqdiv>
body>
<script type="text/javascript">
var ele=document.getElementsByTagName('div')[0];
console.log(ele.className);
console.log(ele.classList[0]);
console.log(ele.classList[1]);
console.log(ele.classList.add("div3"));
console.log(ele.className);
// console.log(ele.classList.remove());
script>
html>