蓝旭第五周博客DOM与BOM基础知识

meoo_

于 2024-04-21 10:09:36 发布

阅读量520

点赞数 15

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/meoo_/article/details/138006371

版权

<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>

一、DOM基础知识

1、JavaScript HTML DOM简介

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

2.查找HTML元素

（1）.通过id查找HTML元素。

var x=document.getElementById("intro");

（2）.通过类名查找HTML元素。

var x=document.getElementsByClassName("intro");
尝试一下 »

（3）.通过标签名查找HTML元素。

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3、JavaScript HTML DOM - 改变 HTML

（1）改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

（2）改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，可使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

（3）改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

4、JavaScript HTML DOM - 改变CSS

（1）改变 HTML 样式

如需改变 HTML 元素的样式，可使用这个语法：document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

5、JavaScript HTML DOM 事件

（1）onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

（2）onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

（3）onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

（4）onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

6.JavaScript HTML DOM 元素 (节点)

（1）创建新的 HTML 元素 (节点) - appendChild()

<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>

（2）创建新的 HTML 元素 (节点) - insertBefore()

<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");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

二、BOM基础知识

1.Window 尺寸

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
document.documentElement.clientHeight（浏览器可视区域高度）

document.documentElement.clientWidth（浏览器可视区域宽度）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var w=window.innerWidth
        var h=window.innerHeight
        var x=document.getElementById('demo');
        x.innerHTML="浏览器内部宽度"+w+"浏览器内部高度"+h;
    </script>
</body>
</html>

显示预览：

2.JavaScript Window Screen

（1）Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

<script>
document.write("可用宽度: " + screen.availWidth);
</script>

（2）Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

<script>

document.write("可用高度: " + screen.availHeight);

</script>

3.JavaScript Window Location

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

(1)Window Location href

location.href 属性返回当前页面的 URL。

<script>

document.write(location.href);

</script>

(2)Window Location assign

location.assign() 方法加载新的文档。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn" >加载新的文档</button>
    <script>
        function myFunction(){
            window.location.assign("https://www.runoob.com")
        }
        document.getElementById('btn').onclick=myFunction;
    </script>
</body>
</html>

(3)Window Location pathname

location.pathname 属性返回 URL 的路径名。

4.JavaScript Window History

(1)Window history.back()

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的.

(2)Window history.forward()

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的.

5.JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

meoo_

关注

15
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
蓝旭第五周博客DOM与BOM基础知识

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应。
复制链接

扫一扫