DOM知识总结
1.什么是DOM:
文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程
序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）
组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
获得div信息：
document.getElementById("div对应的id");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dom简介</title> </head> <body> <!-- <div id="intro"></div> <div id="main"> <p>The DOM is very useful.</p> </div> <div class="content"></div> var x=document.getElementById("intro"); var x=document.getElementById("main"); var y=x.getElementsByTagName("p"); var content = document.getElementsByClassName("content"); --> <div id="intro">helloworld</div> <div id="main"> <p>The DOM is very useful.</p> </div> <div class="content">1</div> <div class="content">2</div> <div class="content">3</div> <div class="content">4</div> <script type="text/javascript"> // 通过js获取html标签 var intro = document.getElementById("intro"); // 通过id找html，唯一的 var main = document.getElementById("main"); var p = main.getElementsByTagName("p")[0]; var content1 = document.getElementsByClassName("content")[0]; </script> </body> </html>
DOM的节点：
var p=document.createElement("p");//生成一个<p></p>
var word=document.createTextNode("我是新增的p标签“);//在<p></p>里面添加p的内容
p.appendChild(word);//在界面的p标签最后加上新的p标签
DOM的事件：也就是点击某一个内容触发事件
为 <button> 元素添加点击事件。 当用户点击按钮时，在 id="demo" 的 <p> 元素上输出 "Hello World" :
document.getElementById("myBtn").addEventListener("click", function(){ document.getElementById("demo").innerHTML = "Hello World"; });
<div onclick="alert("helloword")>按钮</div>
<div id="main">我是main</div>
<div id="btn">我是btn</div>
<script type="text/javascript">
var main=document.getElementById("main");
main.onclick=function(){
alert("main被触发了”);
}
var btn=document.getElementById("btn");
btn.addEventListener("click")
调整界面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Js window</title> </head> <body> <button onclick="openwindow()">创建窗口</button> <button onclick="myFunction()">调整窗口</button> <button onclick="moveFunction()">移动窗口</button> <button onclick="closeFunction()">关闭窗口</button> <script type="text/javascript"> var w; function openwindow(){
<!-- https://www.runoob.com/jsref/met-win-open.html
打开一个空的新界面 --> w=window.open('','', 'width=300,height=300'); } function myFunction(){
<!--重新设置大小--> w.resizeTo(500,500); w.focus(); } function moveFunction(){
<!--移动到了新的位置定位--> w.moveTo(700,500); w.focus(); } function closeFunction(){
<!--关闭文档框--> w.close(700,500); w.focus(); } </script> </body> </html>
window.Location:
步骤：
浏览器界面——按下F12——点击Console——分别输入如下内容
location.hostname 返回web主机的域名
location.pathname返回当前页面的路径和文件名
location.protocol 返回所使用的web协议（http://或者https://)
location.href返回（当前页面的整个URL)
window.history:
Window.history 对象在编写时可不使用window这个前缀直接写history
history.back()在与浏览器点击后会后退一级
history.forward()在与浏览器中点击按钮向前一级
history.go(0)刷新当前页，history.go(-1)上一页，history.go(-2)上两页
