history对象:
History 对象包含用户(在浏览器窗口中)访问过的 URL。窗口之间是相互独立的。
<input type="button" onclick="history.forward()"> <input type="button" onclick="history.back()"> <input type="button" onclick="history.go()">
location对象:
DOM对象:
(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
HTML 文档中的所有内容都是节点(NODE):
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
节点(自身)属性:
- attributes - 节点(元素)的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点(元素)的文本值
<div id="div1">this is div</div> <script> var node = document.getElementById("div1"); console.log(node.attributes); console.log(node.nodeType); //1 console.log(node.nodeValue); //null console.log(node.nodeName); //DIV console.log(node.innerHTML); //this is div </script>
导航属性:
- parentNode - 节点(元素)的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点(元素)的子节点
<div class="div1"> <div class="div2"></div> <p></p> </div> <script> var div2=document.getElementsByClassName("div2")[0]; console.log(div2.nextSibling.nodeName) //text,为什么不是P </script>
由于此种导航方式是节点导航,而空格或换行也文本节点,所以这个导航中包括文本节点,而这些换行或文本节点并不是我们想要的,所以除了parentNode导航属性外,其它的属性用处不大。
推荐导航属性:
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
查找节点可以通过两种方式:一种是全局查找(页面查找)、第二种是局部查找
全局查找就是通过以下4种方法在整个页面查找:
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法 //标签名称,如div、p等
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法 //属性名称
局部查找就是在某个标签下查找:先通过全局查找找到某个标签对象,然后用这个标签对象调用下面方法。
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
因为id全局唯一,没必要进行局部查找,而Name这种方法,语法不支持。
注意:查找是方法,导航是属性!
Html DOM Event
下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习:输入框 onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击。
给元素添加事件属性的两种方法:一种是在标签里面直接加,另一种是在script里面通过属性来加。
<div onclick="func1()">第一种方式!</div> <p id="abc">第二种方式!</p> <script> function func1() { alert(123); } var ele = document.getElementById("abc"); ele.onclick=function () { alert("你真行!"); } </script>
利用Javascript中的DOM进行增删改查:
<script type="text/javascript"> //在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页. function addNode(){ //1.获得 第一个div var div = document.getElementById("div_1"); //2.创建a标签 createElement==>创建一个a标签 <a></a> var eleA = document.createElement("a"); //3.为a标签添加属性 <a href="http://www.baidu.com"></a> eleA.setAttribute("href", "http://www.baidu.com"); //4.为a标签添加内容 <a href="http://www.baidu.com">百度</a> eleA.innerHTML = "百度"; //5.将a标签添加到div中 div.appendChild(eleA); } //点击后 删除div区域2 function deleteNode(){ //1 获得要删除的div区域 var div = document.getElementById("div_2"); //2.获得父亲 var parent = div.parentNode; //3 由父亲操刀 parent.removeChild(div); } //点击后 替换div区域3 为一个美女 function updateNode(){ //1 获得要替换的div区域3 var div = document.getElementById("div_3"); //2创建img标签对象 <img /> var img = document.createElement("img"); //3添加属性 <img src="001.jpg" /> img.setAttribute("src", "001.JPG"); //4.获得父节点 var parent = div.parentNode; //5.替换 parent.replaceChild(img, div); } //点击后 将div区域4 克隆一份 添加到页面底部 function copyNode(){ //1.获取要克隆的div var div = document.getElementById("div_4"); //2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己 var div_copy = div.cloneNode(true); //3.获得父亲 var parent = div.parentNode; //4.添加 parent.appendChild(div_copy); } </script>
修改HTML DOM:
1、改变html内容:
<script> var ele=document.getElementById("div1"); var ele1=document.createElement("p"); //通过document的cerateElement创建标签 ele.appendChild(ele1); //对拿到div标签添加子标签 ele1.innerHTML="hello"; //修改html内容,此种方式解释内容中的标签,innerText不解释。 ele1.setAttribute("id","p1"); //括号里面两个参数都是字符串 </script>
2、改变CSS样式:
<body> <div id="div1">1223</div> <script> var ele=document.getElementById("div1"); ele.style.color="red"; //后面加style,然后再加样式 alert(ele.getAttribute("id")); //div1,获取属性值。
3、关于class的属性:
elementNode.classname
elementNode.classlist.add()
elementNode.classlist.remove()
<head> <style> .bigger{ font-size: 30px; color: red; } .smaller{ font-size: 10px; color: yellow; } </style> </head> <body> <div id="div1">这是一个文本;这是一个文本;这是一个文本;这是一个文本;</div> <input type="button" onclick="change('bigger')" value="变大"> //此处onclick为调用函数,并非定义函数,所以不用function关键字 <input type="button" onclick="change('smaller')" value="变小"> <script> function change(a) { var ele=document.getElementById("div1"); ele.classList.add(a); //因为add后面括号中加的是字符串,所以上面的函数括号中参数也要传字符串,由于双引产生混淆,所以用单引 } </script>