四、JS操作BOM和DOM

1. BOM对象

BOM 即浏览器对象模型，主要包含一下一些内容：

window 浏览器窗口

 window.innerHeight  // 获取窗口高度
window.innerWidth  // 获取窗口宽度

navigator 浏览器常用信息

 navigator.appCodeName
"Mozilla"
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.platform
"MacIntel"
navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.language
"en"

screen 屏幕

 screen.availWidth  // 屏幕可用宽度
2560
screen.availHeight  // 屏幕可用高度
1342

location 当前url信息

 location.hostname
"localhost"
location.pathname
"/JavaProject/%E5%89%8D%E7%AB%AF/javascript/index.html"
location.port
"63342"
location.protocol
"http:"

document 当前页面

2. DOM对象

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

2.1 查找元素

 var x=document.getElementById("intro");  // 通过id查找
var y=x.getElementsByTagName("p");  // 通过标签名查找
var x=document.getElementsByClassName("intro");  // 通过类名查找

2.2 操作HTML

 document.getElementById(id).innerHTML=新的 HTML  // 修改html元素的内容
document.getElementById("image").src="landscape.jpg";  // 修改html的属性

2.3 修改CSS样式

 document.getElementById("p2").style.color="blue";  // 修改颜色
document.getElementById("p2").style.fontFamily="Arial";  // 修改字体
document.getElementById("p2").style.fontSize="larger";  // 修改字号

2.4 操作元素

创建元素，添加元素

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>
</head>
<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>
</body>
</html>

移除元素

 <script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);  // 移除元素
</script>

2.5 操作表单

获取/更新input输入框中的值

 <form action="">
    姓名<input type="text">
</form>
 
var person = document.getElementsByTagName('input')
person[0].value  // 获取表单中的值
"张三"
person[0].value = '李四'  // 更新表单中的值

获取/更新radio是否被选中

 <form action="">
    <input type="radio" name="sex" value="man" id="man">男 <br/>
    <input type="radio" name="sex" value="woman" id="woman">女
</form>
 
var sex = document.getElementById('man')
sex.checked
true

提交表单数据

使用button的onclick提交
使用form的onsubmit属性提交

使用两个密码框，其中一个隐藏显示，并添加md5加密啊

 <!--使用hidden实现-->
<form action="" method="post" onsubmit="return submitInfo()">
    <span>用户名</span>
    <input type="text" name="username" id="username">
 
    <p>
        <span>密码</span>
        <input type="password" id="input_password">
        <input type="hidden" name="password" id="md5_password" >
    </p>
    <button type="submit">登录</button>
</form>
 
    <script>
        function submitInfo(){
            let uname = document.getElementById('username');
            let pwd = document.getElementById('input_password');
            let md5_pwd = document.getElementById('md5_password');
            md5_pwd.value = md5(pwd.value);
            return true;
        }
    </script>

posted @ 2021-04-07 15:37 LucaZ 阅读(59) 评论(0) 收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 解锁.NET 9性能优化黑科技：从内存管理到Web性能的最全指南
· .net clr 8年才修复的BUG，你让我损失太多了
· .NET周刊【3月第5期 2025-03-30】
· 一个神奇的JS代码，让浏览器在新的空白标签页运行我们 HTML 代码（createObjectURL
· 即时通信SSE和WebSocket对比

公告

昵称： LucaZ
园龄： 5年10个月
粉丝： 0
关注： 0

+加关注

2025年4月

日

一

二

三

四

五

六

Luca Z

四、JS操作BOM和DOM

四、JS操作BOM和DOM

1. BOM对象

2. DOM对象

2.1 查找元素

2.2 操作HTML

2.3 修改CSS样式

2.4 操作元素

2.5 操作表单

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

	window.innerHeight // 获取窗口高度
	window.innerWidth // 获取窗口宽度

	navigator.appCodeName
	"Mozilla"
	navigator.appName
	"Netscape"
	navigator.appVersion
	"5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
	navigator.platform
	"MacIntel"
	navigator.userAgent
	"Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
	navigator.language
	"en"

	screen.availWidth // 屏幕可用宽度
	2560
	screen.availHeight // 屏幕可用高度
	1342

	location.hostname
	"localhost"
	location.pathname
	"/JavaProject/%E5%89%8D%E7%AB%AF/javascript/index.html"
	location.port
	"63342"
	location.protocol
	"http:"

	var x=document.getElementById("intro"); // 通过id查找
	var y=x.getElementsByTagName("p"); // 通过标签名查找
	var x=document.getElementsByClassName("intro"); // 通过类名查找

	document.getElementById(id).innerHTML=新的 HTML // 修改html元素的内容
	document.getElementById("image").src="landscape.jpg"; // 修改html的属性

	document.getElementById("p2").style.color="blue"; // 修改颜色
	document.getElementById("p2").style.fontFamily="Arial"; // 修改字体
	document.getElementById("p2").style.fontSize="larger"; // 修改字号

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<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>
	</head>
	<body>
	<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另外一个段落。</p>
	</div>
	</body>
	</html>

	<script>
	var parent = document.getElementById("div1");
	var child = document.getElementById("p1");
	parent.removeChild(child); // 移除元素
	</script>

	<form action="">
	姓名<input type="text">
	</form>

	var person = document.getElementsByTagName('input')
	person[0].value // 获取表单中的值
	"张三"
	person[0].value = '李四' // 更新表单中的值

	<form action="">
	<input type="radio" name="sex" value="man" id="man">男 <br/>
	<input type="radio" name="sex" value="woman" id="woman">女
	</form>

	var sex = document.getElementById('man')
	sex.checked
	true

	<!--使用hidden实现-->
	<form action="" method="post" onsubmit="return submitInfo()">
	<span>用户名</span>
	<input type="text" name="username" id="username">

	<p>
	<span>密码</span>
	<input type="password" id="input_password">
	<input type="hidden" name="password" id="md5_password" >
	</p>
	<button type="submit">登录</button>
	</form>

	<script>
	function submitInfo(){
	let uname = document.getElementById('username');
	let pwd = document.getElementById('input_password');
	let md5_pwd = document.getElementById('md5_password');
	md5_pwd.value = md5(pwd.value);
	return true;
	}
	</script>