js的dom/bom对象

一.bom

1)navigator: 获取客户机(浏览器)的信息

2) screen:获取屏幕的信息

3)location:请求url地址

4)history:请求url的历史记录

//navigator
       document.write(navigator.appName+"<hr>") ;   //得到浏览器名称

//screen
        document.write(screen.width+"   ");     //得到屏幕宽度
        document.write(screen.height+"<hr>");      //得到屏幕高度

 //location
        document.write(location.href+"<br>");    //得到请求地址
        function  changeHref() {              //改变地址
            location.href="http://www.baidu.com";          //必须带有http,若无服务器为该文件所在服务器
        }

//history
        function back() {
            history.back();       //后退
            //history.go(-1);
        }
        function forward() {
            history.forward();      //上一个页面
            //history.go(1);
        }

5)window:表示一个窗口对象

-window对象是一个顶层对象,包含以上的四种对象

<script type="text/javascript">
       //confirm()方法;确定返回true,取消返回false
        var flag=confirm("是否删除");

        //prompt();输入对话框
        prompt("请输入","你好");     //第一个参数为提示信息;第二个为输入框默认值

        //open();打开一个新的窗口
        function fopen () {
            open("http://www.baidu.com","","width=200,height=100");
        }

        //close(); !!!浏览器兼容性差
        close();

        //定时器
        var id1=setInterval("alert(123)","3000");     //第一个参数为js代码,第二个为毫秒周期(循环执行);返回一个id
        var id2=setTimeout("alert(abc)","1000");     //同上,但只执行一次

        function clear1() {
            clearInterval(id1);       //清除interval
        }

        function clear2() {
            clearTimeout(id2);       //清除timeout
        }
    </script>
</head>
<body>
<input type="button" value="测试open()" onclick="fopen()">
<input type="button" value="clearinterval" onclick="clear1()">
<input type="button" value="cleartimeout" onclick="clear2()">
</body>

二.dom

1.document object model

文档:超文本标记文档(html/xml)

2.dom解析html过程:在内存中分配一个树形结构,把html的每部分都封装成对象.

3.document对象:表示整个文档

1)常用方法

-write() !!当页面完整加载后,再write会覆盖之前的页面

-getElementById()

-getElementsByName() //返回数组对象

*若只有一个元素:getElementsByName()[0], 则返回那个对象

-getElementsByTagName()

2)向末尾添加接待点

 <script type="text/javascript">
        function add1() {
            //得到ul标签
            var ul1=document.getElementById("ulid");
            //创建标签
            var li1=document.createElement("li");
            //创建文本
            var text1=document.createTextNode("555");
            //把文本加入到标签之中
            li1.appendChild(text1);
            //把li加到ul之中
            ul1.appendChild(li1);
        }
    </script>

<ul id="ulid">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<input type="button" value="add" onclick="add1()">

4.element对象

1)要操作元素对象,首先通过document获取到它

2)方法

-getAttribute(属性) !!!也可以通过元素.属性获取

-setAttribute(属性,值);

-removeAttribute(属性); !!不能删除value

3)获取一个标签下面的所有子标签

法一. childNode属性但兼容性很差

法二. eg. ul.getElementsByTagName("li"); //这个方法虽然是document的方法,但也可以这样使用

4).操作dom树

(1)插入节点

-appendChild() 添加文本到标签/添加子节点到末尾

*类似于剪切黏贴的效果 eg.将div1中的内容,利用该方法到div2,则div1中内容消失,转移到div2中

-父节点.insertBefore(newNode,oldNode) 在指定节点之前插入新节点

(2)删除节点 -removeChild()

(3)替换节点 -replaceChild(new,old)

(4)复制节点 -cloneNode(boolean) *布尔值表示是否复制子节点

5.属性对象

6.文本对象

7.node对象:以上的父对象

1)属性一:

-nodeName -nodeType -nodeValue

<script type="text/javascript">
        function add1() {
            //元素对象
            var span1=document.getElementById("t");
            document.write(span1.nodeName+" "+span1.nodeType+" "+span1.nodeValue+"<hr>");
            //属性对象
            var id1=span1.getAttributeNode("id");
            document.write(id1.nodeName+" "+id1.nodeType+" "+id1.nodeValue+"<hr>");
            //文本对象
            var text1=input1.firstChild;
            document.write(text1.nodeName+" "+text1.nodeType+" "+text1.nodeValue+"<hr>");

        }
    </script>
</head>
<body>
<!--<input type="text" value="vvvv" id="t">-->
<span id="t" >fdfdfd</span>
<input type="button" onclick="add1()">
</body>

运行结果: SPAN 1 null id 2 t #text 3 fdfdfd

2)属性二:

-父节点 parentNode

-子节点 childNode(所有子节点) firstChild lastChild

-同辈节点 nextSibling(下一个兄弟节点) previousSibling(上一个)

8.innerHTML属性

1)不是dom的标准组成部分,但是大多数浏览器都支持

2)作用: 获取内容/向标签中设置内容(可以使html代码)

猜你喜欢