JavaScript2，BOM浏览器常用对象、Dom文档对象模型

最新推荐文章于 2022-01-12 19:45:19 发布

在下，杨江河

最新推荐文章于 2022-01-12 19:45:19 发布

阅读量259

点赞数

分类专栏： JavaScript 文章标签： javascript html js

本文链接：https://blog.csdn.net/Rockandrollman/article/details/108684164

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

BOM浏览器常用对象

Screen对象

屏幕对象
	    var width = screen.availWidth;   //返回显示屏幕的宽度(除 Windows 任务栏之外)
        var height = screen.availHeight;  //返回显示屏幕的高度
        var showWidth = screen.width;  //返回显示器屏幕的宽度。
        var showHeight = screen.height;  // 返回显示屏幕的高度。
        document.write("width:"+width+"<br/>height:"+
        height+"<br/>showWidth:"+showWidth+"<br/>showHeight:"+showHeight);
        用于获取当前屏幕相关参数

Window对象

窗口对象:是浏览器bom对象的根本
Window.open(url)用新窗口打开指定url
Window.close()关闭当前窗口
<a href="javascript:window.open('window2.html')">打开window2</a>
<a href="javascript:window.close()">关闭window1</a>

Winow.scrollTo(xpos,ypos) 将滚动条移动至指定位置
<a href="javascript:window.scrollTo(0,2000)">滚动</a>

Window.setInterval(code,millisec) 设置计时器,周期重复执行代码
        function a() {
            window.open('window2.html');
        }
        window.setInterval(a, 10);
Code处填写的是调用函数的名称注意不需要(),如果添加()或者直接将要执行的代码填入,只会执一次.

Window.clearInterval(var)清除指定计时器
    <a href="javascript:window.clearInterval(aaaa)">停</a>

Window.Timeout (code,millisec) 设置定时器,指定时间后执行代码
var  bbbb= window.setTimeout(a,5000);

Window. clearTimeout(var) 清除指定定时器
    <a href="javascript:window.clearTimeout(bbbb)">停</a>

Dom文档对象模型

在这里插入图片描述
结构标签:html、body、等用于结构声明的标签
元素标签:在bodu中用于页面内容显示的标签
文本:标签内的值或者value
document对象代表浏览器窗口中加载的整个HTML文档
常用属性

名称	描述
bgColor	页面的背景颜色
documentElement	获取对文档根结点的引用
body	文档主体的开始和结束。
title	设置或获取页面的标题

常用方法：

名称	描述
write	用于向HTML文档中动态写入内容
getElementById	获取指定ID的HTML页面元素对象
getElementsByName	获取一组指定name的HTML页面元素对象
getElementsByTagName	返回所有指定标签名的HTML页面元素对象

<body>
    <input type="checkbox" name="isBuy">
    <input type="checkbox" name="isBuy">
    <input type="checkbox" name="isBuy">
    <input type="checkbox" name="isBuy">
    <a href="javascript:checkAll()">全选</a>
    <a href="javascript:checkNoAll()">全不选</a>
</body>
<script>
    function checkAll() {
        var checkArray = document.getElementsByName("isBuy");
        for (var i = 0; i < checkArray.length; i++) {
            checkArray[i].checked = true;
        }
    }
    function checkNoAll() {
        var checkArray = document.getElementsByName("isBuy");
        for (var i = 0; i < checkArray.length; i++) {
            checkArray[i].checked = false;
        }
    }
</script>

innerHTML属性
当前双标签中的内容包含标签
innerTEXT属性
当前双标签中的文本内容不包含标签

<div id="d1">改变前的文本</div>
   <a href="javascript:document.getElementById('d1').innerHTML='<b>改变后的文本</b>'">改变文本</a>

显示与隐藏—visibility
使指定元素不可见,但是元素位置不会让出

值	描述
visible	表示元素是可见的
hidden	表示元素是不可见的

显示与隐藏—display
隐藏指定元素,但会让出位置

值	描述
none	表示此元素不会被显示
block	表示此元素将显示为块级元素，此元素前后会带有换行符

<body>
    <a href="javascript:aa()">aaaaa</a>
    <a href="javascript:bb()">bbbbb</a>
    <img id="i1" src="../img/a.gif">
</body>
<script>
    var i1 = document.getElementById("i1");
    function bb() {
        var i1Value = i1.style.display;
       
        if (i1Value == "" || i1Value == "block") {
            i1.style.display = "none";
        } else {
            i1.style.display = "block";
        }
    }
    function aa() {
        var i1Value = i1.style.visibility;
        if (i1Value == "" || i1Value == "visible") {
            i1.style.visibility = "hidden";
        } else {
            i1.style.visibility = "visible";
        }
    }
</script>

DOM—节点
可以通过document.getElementById()等方法获取指定的元素对象,但是有些时候我们只知道节点的位置,这个时候就需要通过已知元素与目标节点的位置进行元素对象的获取

名称	描述
childNodes	当前节点的所有子节点
firstChild	当前节点的所有子节点中第一个节点
lastChild	当前节点的所有子节点中最后一个节点
parentNode	当前节点的父节点
nodeValue	节点值
nodeName	节点的名称
nodeType	节点的类型

函数

函数：函数是一组可以随时随地运行的语句
parseInt (“字符串”)
将字符串转换为整型数字
如: parseInt (“86”)将字符串“86”转换为整型值86
parseFloat(“字符串”)
将字符串转换为浮点型数字
如: parseFloat(“34.45”)将字符串“34.45”转换为浮点值34.45
isNaN()
用于检查其参数是否是非数字

自定义函数

语法:function 函数名(参数列表){方法体};
参数列表书写与java一样可以书写0~无穷个
但是不需要书写数据类型,因为js中素有数据类型的声明使用的是var
例如 :function a(a,b,c){}
Js中不要书写重载方法
在这里插入图片描述

事件

通常与表单标签、函数一同使用,使用事件将指定函数绑定到指定标签,当标签发生指定事件时,调用相应函数

常用事件
浏览器事件
onload:当页面加载完毕指定标签时
onsubmit:当form表单发生提交时

鼠标事件
onMouseMove:当鼠标在指定标签上移动时
onMouseOver:当鼠标移入指定标签时
onMouseOut:当鼠标移除指定标签时
onMouseDown:当鼠标在指定标签中被按下时
onMouseUp :当鼠标在指定标签中抬起时

文本框事件
onchange:当指定文本框内容被修改时
onselect :当指定文本框内容被选择时
其他
Onclick:按钮组件被点击时

在下，杨江河

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript2，BOM浏览器常用对象、Dom文档对象模型

BOM浏览器常用对象Screen对象屏幕对象 var width = screen.availWidth; //返回显示屏幕的宽度(除 Windows 任务栏之外) var height = screen.availHeight; //返回显示屏幕的高度 var showWidth = screen.width; //返回显示器屏幕的宽度。 var showHeight = screen.height; // 返回显示屏幕的高度。
复制链接

扫一扫