四、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 阅读(57) 评论(0) 编辑收藏举报

刷新页面返回顶部

Luca Z

四、JS操作BOM和DOM

四、JS操作BOM和DOM

1. BOM对象

2. DOM对象

2.1 查找元素

2.2 操作HTML

2.3 修改CSS样式

2.4 操作元素

2.5 操作表单

公告