I can 前端-05 DOM模型与Window对象

最新推荐文章于 2022-06-02 17:13:13 发布

Eden(Peng)Pan

最新推荐文章于 2022-06-02 17:13:13 发布

阅读量351

点赞数

分类专栏： Major：Web 文章标签：前端

本文链接：https://blog.csdn.net/PanPen120/article/details/78628373

版权

Major：Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

网页需要交互，但网页如果很复杂，交互的话怎么去操控呢？
事实上，网页上的对象按照一定的结构排列

DOM（Document Object Model）

操控网页的标准

规定了HTML文档中各个对象属性、方法和事件的标准
描述了整个HTML文档，浏览器通过它管理和显示各个元素
我们通过编程访问来修改

DOM是我们操控整个网页的标准

对象关系

对象布局

这里写图片描述

Window对象和常用方法

window对象属性

document

！！！中国人口何其多，如何找到某个人

方法1：身份证号码 document.getElementById（“元素id”）
方法2：省份/城市/区县/街道/小区/门牌号/姓名 form名称.元素名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>测试操控对象的方法</title>
        <script type="text/javascript">
            function GetUserInfo(){
                //window对象是顶层对象对象，可以忽略不写，document/window.document
                var userName = document.getElementById("userName").value;
                var pwd = userForm.pwd.value;
                alert(userName);
                alert(pwd);
            }
        </script>
    </head>
    <body>
        <form name="userForm" method="">
            账户名：<input type="text"id="userName"/>
            密码：<input type="text" name="pwd"/>
            <input type="button" value ="提交" onclick="GetUserInfo()" />
        </form>
    </body>
</html>

每个html标签都有id和name属性

getElementBy() 根据元素ID获取唯一对象
getElementByName() 根据元素名称获取一组同名对象

location

填写URL，改变页面跳转或加载

href-设置/获取要操作的URL
reload()-重新加载当前页面
replace(“url”)-加载新页面替换当前页面

history

history.back() 后退
history.forward() 前进

剩余的

状态栏信息
window.status = “系统当前状态：正在等待用户提交数据！”

屏幕宽度
window.screen.width

window对象常用方法

对话框

alert
confirm

打开新窗口

oep

<!DOCTYPE html>
<html>
<head>
    <title>window对象方法</title>
    <script type="text/javascript">
        function openNewWindow() {
            window.open("userLogin.html", "用户登录", 
            "toolbar=0, location=0, status=0,menubar=0,width=300px,height=200px,scrollbars=1");
        }     
    </script>
</head>
<body>
    <input type="button" value="打开新窗口" onclick="openNewWindow()" />
    <input type="button" value="关闭当前窗口" onclick="window.close()" />
</body>
</html>

打开模态窗口

<!DOCTYPE html>
<html>
<head>
    <title>打开模式对话框</title>
    <script type="text/javascript">
        function openNewWindow() {
            showModalDialog("userLogin.html", "用户登录", 
            "status=0;dialogWidth=300px;dialogHeight=200px;scroll=1");
        }     
    </script>
</head>
<body>
    <input type="button" value="打开模式窗口" onclick="openNewWindow()" />
</body>
</html>