JavaScript DOM、BOM操作

js HTML DOM

简介：

HTML DOM（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-66Z91IwX-1607906799173)(C:\Users\yijiu\AppData\Local\Temp\1606048383137.png)]

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

方法：

<html>
<body>
<p id="p"></p>
<script>
document.getElementById("p").innerHTML = "Hello World!";//将p标签内添加内容
</script>
</body>
</html>

getElementById 方法：

访问 HTML 元素最常用的方法是使用元素的 id。

在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。

innerHTML 属性：

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括和。

元素：

查找 HTML 元素：

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

改变 HTML 元素：

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

改变 HTML 元素

方法	描述
element.innerHTML = new html content	改变元素的 inner HTML
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){ code}	向 onclick 事件添加事件处理程序

查找 HTML 对象

首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。

后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。

属性	描述	DOM
document.anchors	返回拥有 name 属性的所有元素。	1
document.applets	返回所有元素（HTML5 不建议使用）	1
document.baseURI	返回文档的绝对基准 URI	3
document.body	返回元素	1
document.cookie	返回文档的 cookie	1
document.doctype	返回文档的 doctype	3
document.documentElement	返回元素	3
document.documentMode	返回浏览器使用的模式	3
document.documentURI	返回文档的 URI	3
document.domain	返回文档服务器的域名	1
document.domConfig	废弃。返回 DOM 配置	3
document.embeds	返回所有元素	3
document.forms	返回所有元素	1
document.head	返回元素	3
document.images	返回所有元素	1
document.implementation	返回 DOM 实现	3
document.inputEncoding	返回文档的编码（字符集）	3
document.lastModified	返回文档更新的日期和时间	3
document.links	返回拥有 href 属性的所有和元素	1
document.readyState	返回文档的（加载）状态	3
document.referrer	返回引用的 URI（链接文档）	1
document.scripts	返回所有

DOM流

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());//输出中国时间
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<img id="image" src="1.jpg">//设置图片路径
<script>
document.getElementById("image").src = "2.jpg";//改变图片名称（改变图片）
</script>
</body>
</html>

CSS样式：

<html>
<body>
<p id="p">Hello World!</p>
<script>
document.getElementById("p").style.color = "blue";//给文字改变颜色
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Hello World!</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">点击我！</button>//给button按钮设置点击事件，在点击之后在改变文字颜色
</body>
</html>

CSS动画：

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: blue;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>
<p><button onclick="move()">单击我</button></p> //点击之后让小盒子从左上角滑动到右下角
<div id ="container">
  <div id ="animate"></div>
</div>
<script>
//定义函数move
function move() {
  var elem = document.getElementById("animate");   //获取小盒子
  var pos = 0;//定义pos为0
  var time = setInterval(frame, 5); //定时器 5s时间做完事件
  //定义函数 frame
  function frame() {
    if (pos == 350) {
      clearInterval(time);//如果pos==350时，清除定时器
    } else {
      pos++; 
      elem.style.top = pos + "px"; //设置与上方的距离
      elem.style.left = pos + "px"; //设置与左方的距离
    }
  }
}
</script>
</body>
</html>

DOM事件：

HTML 事件的例子：

当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时

//点击事件
一：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">点我一下</h1>//点我改变文字
<script>
function changeText(id) {
  id.innerHTML = "我改变了，哈哈哈哈哈！";
}
</script>
</body>
</html>
二：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='我改变了，哈哈哈哈哈！'">点我一下</h1>
</body>
</html>

//移入移出事件
<!DOCTYPE html>
<html>
<style>
	div{
     	width:120px;
        height:20px;
        padding:40px;
    	background-color:red;
        color:#fff;
    }
</style>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)">请移入</div>
<script>
function mOver(obj) {
  obj.innerHTML = "请移出"
}
function mOut(obj) {
  obj.innerHTML = "请移入"
}
</script>
</body>
</html>

节点：

//添加节点
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一段文字。</p>
<p id="p2">这是另一段文字。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新的文本。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>

//删除节点
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">这是一段文字。</p>
<p id="p2">这是另一段文字。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>

//替换节点
<!DOCTYPE html>
<html>
<body>

<div id="div1">
<p id="p1">这是一段文字。</p>
<p id="p2">这是另一段文字。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
var para = document.createElement("p");
var node = document.createTextNode("这是新的文本。");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

事件监听：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zoPp0t46-1607906799174)(C:\Users\yijiu\AppData\Local\Temp\1606049678813.png)]

js HTML BOM

js window

Window 对象:

所有浏览器都支持 window 对象。它代表浏览器的窗口。

所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至（HTML DOM 的）document 对象也是 window 对象属性：

window.document.getElementById("box");

等同于：

document.getElementById("box");

窗口尺寸:

两个属性可用用于确定浏览器窗口的尺寸。

这两个属性都以像素返回尺寸：

window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）

浏览器窗口（浏览器视口）不包括工具栏和滚动条。

对于 Internet Explorer 8, 7, 6, 5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或

document.body.clientHeight
document.body.clientWidth

其他窗口方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口

js window location

window.location 对象可不带 window 前缀书写。

window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档

js 弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框。

警告框

如果要确保信息传递给用户，通常会使用警告框。

当警告框弹出时，用户将需要单击“确定”来继续。

语法：

window.alert("sometext");

window.alert() 方法可以不带 window 前缀来写。

实例：

alert("一个警告框！");

确认框

如果您希望用户验证或接受某个东西，则通常使用“确认”框。

当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。

如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。

语法：

window.confirm("sometext");

window.confirm() 方法可以不带 window 前缀来编写。

实例：

var r = confirm("取消还是确认？");
if (r == true) {
    x = "确认！";
} else {
    x = "取消！";
}

提示框

如果您希望用户在进入页面前输入值，通常会使用提示框。

当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。

如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。

语法

window.prompt("sometext","defaultText");

window.prompt() 方法可以不带 window 前缀来编写。

实例

var person = prompt("请输入您的排名", "第一名");
if (person != null) {
    document.getElementById("demo").innerHTML = "你好 " + person + "！今天天气很好！";
}

折行

如需在弹出框中显示折行，请在反斜杠后面加一个字符 n（\n）

实例

alert("Hello\nHow are you?");