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

来源：互联网发布：网络性能参数指标编辑：程序博客网时间：2024/06/03 03:50

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

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>

onLoad事件

在窗口完成文档内容加载时触发

阅读全文

0 0