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

BOM浏览器常用对象

Screen对象

html" title=javascript>javascript">屏幕对象
	    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对象

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

Winow.scrollTo(xpos,ypos) 将滚动条移动至指定位置
<a href="html" title=javascript>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="html" title=javascript>javascript:window.clearInterval(aaaa)">停</a>

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

Window. clearTimeout(var) 清除指定定时器
    <a href="html" title=javascript>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页面元素对象

html" title=javascript>javascript"><body>
    <input type="checkbox" name="isBuy">
    <input type="checkbox" name="isBuy">
    <input type="checkbox" name="isBuy">
    <input type="checkbox" name="isBuy">
    <a href="html" title=javascript>javascript:checkAll()">全选</a>
    <a href="html" title=javascript>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属性
当前双标签中的文本内容不包含标签

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

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

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

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

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

html" title=javascript>javascript"><body>
    <a href="html" title=javascript>javascript:aa()">aaaaa</a>
    <a href="html" title=javascript>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()
用于检查其参数是否是非数字