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://)
kk返回（当前页面的整个URL)
window.history:
Window.history 对象在编写时可不使用window这个前缀直接写history
history.back()在与浏览器点击后会后退一级
history.forward()在与浏览器中点击按钮向前一级
history.go(0)刷新当前页，history.go(-1)上一页，history.go(-2)上两页
腾讯云开发者
