JavaScript - BOM&DOM - 《计算机学习笔记》

BOM

<html>
    <head>
        <script>
            //1     window对象
            /*
            1.  子对象
                document    返回该窗口的HTML文档
                location    返回HYML文档的URL
                navigtor    浏览器属性
                screen      屏幕对象
                history     浏览窗口历史
            2.  方法
                alert()     警告窗口
                confirm()   确认窗口
                prompt()    提醒输入框
                open()      打开窗口
                close()     关闭窗口
                moveBy()    移动窗口
                moveTo()    移动窗口到
                resizeBy()  重设窗口大小
                resizeTo()
                scrollBy()  滚动Html文档
                scrollTo()
                setInterval()   设置定时器
                clearInterval() 删除定时器
            */
            function testConfirm(){
                var answer = window.confirm("Yes/No");
                if(answer){
                    document.write("Yes");
                }else{
                    document.write("No");
                }
            }
            function testPrompt(){
                var answer = window.prompt("2+3=?","5");
            }
            function testMoveBy(){
                window.moveBy(250,250);
            }
            function testMoveTo(){
               window.moveTo(250,250);
            }
            function testResizeBy(){
                window.resizeBy(250,250);
            }
            function testResizeTo(){
               window.resizeTo(250,250);
            }
            function haha(){
                document.getElementById("haha").innerHTML = "haha";
            }
            var t = window.setInterval("haha()",1000) 
        </script>
    </head>
    <body>
        <input type="button" value="confirm" onclick="testConfirm()"/>
        <input type="button" value="prompt" onclick="testPrompt()"/>
        <input type="button" value="moveBy" onclick="testMoveBy()"/>
        <input type="button" value="moveTo" onclick="testMoveTo()"/>
        <input type="button" value="resizeBy" onclick="testResizeBy()"/>
        <input type="button" value="resizeTo" onclick="testResizeTo()"/>
        <div id = "haha">
        </div>
    </body>
</html>

<html>
    <head>
        <script>
            //2.    history对象
            /*
            back()          后退
            forward()       前进
            go(inValue)     进退几个页面
            */
        </script>
    </head>
    <body>
        <a href="./02-1.html">jump to 1</a><br/>
        <a href="./02-2.html">jump to 2</a><br/>
        <h3>第0页</h3>
        <a href=javascript:history.forward()>forward</a><br/>
        <a href=javascript:history.back()>back</a>
    </body>
</html>

<html>
    <head>
        <script>
            //3.    location对象
            /*
            hostname
            hert
            ...
            */
           //4.     screen对象
           /*
           avaiHeight
           ...
           */
          //4.      navigator对象
          /*
          appCodeName
          ...
          */
        </script>
    </head>
</html>

DOM

杂记

<!DOCTYPE html>
<html>
    <head>
        <script>
            //1.    insertAdjacentElement
            /*
            insertAdjacentHTML方法：在指定的地方插入html标签语句
            原型：insertAdajcentHTML(swhere,stext)
            参数：
            swhere: 指定插入html标签语句的地方，有四种值可用：
                1.     beforeBegin: 插入到标签开始前
                2.     afterBegin:插入到标签开始标记之后
                3.     beforeEnd:插入到标签结束标记前
                4.     afterEnd:插入到标签结束标记后
            stext：要插入的内容
            */
           var h1 = document.getElementsByTagName("h1");
           insertAdjacentElement()
           //insertAdjacentElement
            /*
            　　语法： 
            　　    oElement = object . insertAdjacentElement ( sWhere , oElement ) 
            　　参数： 
                　　oElement :　必选项。对象(Element)。要插入到 object 邻近的对象。 
                　　sWhere :　必选项。字符串(String)。
                        beforeBegin :　将 oElement 插到 object 的开始标签之前。 
                    　　afterBegin :　将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。 
                    　　beforeEnd :　将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。 
                    　　afterEnd :　将 oElement 插到 object 的结束标签之后。 
            　　返回值： 
            　　    oElement :　对象(Element)。返回插入的对象的引用。 
            　　说明： 
                　　将 oElement 依据 object 定位插入文档结构。 
                　　当文档正在载入时，不可以尝试此方法。必须在 onload 事件触发以后。 
                　　假如你尝试插入一个已经在文档结构中存在定位的对象，该对象将被移动到你指定的插入位置，而不会有新对象被创建。
            */
        </script>
    </head>
    <h1>hahaha</h1>
        <SCRIPT>
            function fnAdd()
            {
            var oNewItem = document.createElement("LI");
            oList.children(0).insertAdjacentElement("BeforeBegin",oNewItem);
            oNewItem.innerText = "List Item 0";
            }
        </SCRIPT>
            :
        <BODY>
            <OL ID = "oList">
            <LI>List Item 1</LI>
            <LI>List Item 2</LI>
            <LI>List Item 3</LI>
            </OL>
            <INPUT TYPE = "button" VALUE = "Add Item" onclick="fnAdd()">
        </BODY> 
</html>

01 节点访问操作

<html>
    <head>
        <script>
            /**
             * 节点:
             * 1.元素节点
             * 2.文本节点
             * 3.属性节点
             */
            //----------------------------------------------------------------
            /*
             访问操作:
             1. 由ID找节点        getElementById        
             2. 由节点关系        
                    parentNode          返回当前节点的父节点
                    previousSibling     前兄弟节点
                    nextSibling         后兄弟节点
                    childNodes          所有子节点
                    firstChild          第一个子节点
                    lastChild           最后一个子节点
                    getElementByTagName(tagName)    具有指点标签名的所有子节点
            */
           //-----------------------------------------------------------------
                function one(){
                    var s1,s2,s3;
                    with(document){
                        s1 = getElementById("n1");
                        s2 = getElementById("n2");
                        s3 = getElementById("n3");
                    }
                    alert(s1.innerHTML+"\n"+s2.innerHTML+"\n"+s3.innerHTML);
                }
        </script>
    </head>
    <body>
            <div id = "n1">1111111</div>
            <div id = "n2">2222222</div>
            <div id="n3">3333333</div>
            <input type="button" onclick="one()" value="button"/>
            <hr/>
            <ul id  = "name">
                <li id = "l1">aaaaa</li>
                <li id="l2">bbbbb</li>
                <li id="l3">ccccc</li>
            </ul>
            <!--
                谷歌浏览器,火狐浏览器会将标签后的换行当成一个节点,所以下面需要  val.previousSibling.previousSibling
            -->
            <input type="button" value = "父节点" onclick="two(val.parentNode)"/>
            <input type="button" value = "前兄弟节点" onclick="two(val.previousSibling.previousSibling)"/>
            <input type="button" value = "后兄弟节点" onclick="two(val.nextSibling.nextSibling)"/>
            <script>
                var val =document.getElementById("l2");
                function two(target){
                    alert(target.innerHTML);
                }
            </script>
    </body>
</html>

02 表单访问操作

<html>
    <head>
        <script>
            /*  表单控件
                action      返回该表单的提交地址
                elements     全部表单控件所组成的数组
                    {
                        .elements[index]         返回表单中第index个表单控件
                        .elements[elementName]   返回表单内ID或name为elementsName的表单控件
                        .elementsName            返回表单内ID或name为elementsName的表单控件
                    }
                length      表单域个数
                method      返回表单的method属性(get/post)
                target      结果窗口(_self/-blank/_top)
                reset/submit    重置/确定表单
            */
            function operatorForm(){
                var myform = document.forms[0];     //获取第一个表单
                //alert(myform.action);
                myform.reset();
            }
        </script>
    </head>
    <body>
        <form id="myform" action="./01 访问操作.html" method="GET" target="_blank">
            <input type="text" value="haha" name="haha"/>
            <input type="text" value="hehe" name="hehe"/>
            <input type="text" value="enen" name="enen"/>
        </form>
        <input type="button" value="one" onclick="alert(document.getElementById('myform').elements[0].value)"/>
        <input type="button" value="two" onclick="alert(document.getElementById('myform').elements['hehe'].value)"/>
        <input type="button" value="cheek" onclick="operatorForm()"/>
        <br/><br/>
        <hr/>
    </body>    
</html>

03 列表框,访问操作

<html>
    <head>
    </head>
    <body>
        <select id="city" name="city" size="5">
            <option value="beijing">北京</option>
            <!--默认被选中-->
            <option value="shanghai" selected ="selected">上海</option>
            <option value="guangzhou">广州</option>
            <option value="wuhan">武汉</option>
        </select><br/>
        <input type="button" onclick="change(s_city.options[0])" value="第一个城市"/>
        <input type="button" onclick="change(s_city.options[s_city.selectedIndex-1])" value="上一个城市"/>
        <input type="button" onclick="change(s_city.options[s_city.selectedIndex+1])" value="下一个城市"/>
        <script>
            /*  列表框,下拉菜单
                form            返回列表框,下拉菜单所在的表单对象
                length          选项个数
                options[]         所有选项组成的数组
                    {
                        defaultSelected     返回是否默认被选中
                        index               返回该选项在列表中的索引
                        selected            返回该选项是否被选中
                        text                返回该选项呈现的文本
                        value               返回该选项的value属性值
                    }
                selectedIndex   选项的索引
                type            返回下拉列表类型,多选:select-multiple;单选:select-one
            */
            var s_city = document.getElementById("city");
            var change = function(city){
                alert(city.value);
            }
            //------------------------------------------------------------------------
            /*  表格
                caption     返回表格的标题对象
                rows        所有表格行
                    {
                        cells               返回该表格内所有单元格组成的数组
                            cells[index]        单元格在表格内的索引
                        rowIndex            表格行在表格内的索引
                        sectionRowIndex     返回该表格行在其所在元素的索引值
                    }
                tbodies     所有<tbody>组成的数组
                tfoot       所有<tfoot>元素
                thead       所有<thead>元素         
            */
        </script>
</html>

04 表格访问操作

<html>
    <head>
    <body>
        <script>
            //------------------------------------------------------------------------
            /*  表格
                caption     返回表格的标题对象
                rows        所有表格行
                    {
                        cells               返回该表格内所有单元格组成的数组
                            cells[index]        单元格在表格内的索引
                        rowIndex            表格行在表格内的索引
                        sectionRowIndex     返回该表格行在其所在元素的索引值
                    }
                tbodies     所有<tbody>组成的数组
                tfoot       所有<tfoot>元素
                thead       所有<thead>元素         
            */
        </script>
        <br/><br/><hr/>
        <table id="mytable" border="1">
        <caption>表格标题</caption>
            <tr>
                <td>C</td>
                <td>C++</td>
            </tr>
            <tr>
                <td>java</td>
                <td>android</td>
            </tr>
            <tr>
                <td>PHP</td>
                <td>Python</td>
            </tr>
        </table>
    </body>
    <input type="button" value="标题" onclick="alert(document.getElementById('mytable').caption.innerHTML);"/>
    <input type="button" value="第一行第一个" onclick="alert(document.getElementById('mytable').rows[0].cells[0].innerHTML);"/>
    <input type="button" value="第二行第二个" onclick="alert(document.getElementById('mytable').rows[1].cells[1].innerHTML);"/><br/>
    修改第<input type="text" id="row" size="2"/>行,第<input type="text" id="cel" size="2"/>列的值为<input type="text" id="course" size="5"/>
    <input type="button" id="btn_set" value="修改" onclick="changeTable()"/>
    <script>
        function changeTable(){
                var raw = document.getElementById("row").value;
                var cel = document.getElementById("cel").value;
                var temp = document.getElementById("mytable");
                //temp.rows[raw-1].cells[cel-1].innerHTML = document.getElementById("course").value;
                //也可以通过item方式访问
                temp.rows.item(raw-1).cells.item(cel-1).innerHTML = document.getElementById("course").value;
            }
    </script>
</html>

05 节点增删改操作

<!DOCTYPE html>
<html>
    <head>
        <script>
            //  
            /*
                创建节点
                    document.creatElement(Tag);
                复制节点
                    document.cloneNode(boolean deep)    deep为true时复制当前节点以及所有后代节点,为false时仅仅复制当前节点
                增删节点
                    appendChild(newNode)                将newNode添加为当前节点的最后一个子节点
                    insetBefore(newNode,refNode)        在refNode节点前插入newNode节点
                    replaceChild(newNode,oldNode)       将oldNode替换成newNode节点
                    removeChild(oldNode)                将oldNode子节点删除
            */
            function creat(){
                var city = document.getElementById("list");
                var element = document.createElement("li");
                city.appendChild(element);
               // element.innerHT
            }
            function copy(){
                var city = document.getElementById("list");
                var element = city.firstChild.nextSibling.cloneNode(true);
                city.appendChild(element);
            }
            function del(){
                var city = document.getElementById("list");
                var element = city.firstChild.nextSibling;
                city.removeChild(element);
            }
        </script>
    </head>
    <Body>
        <ul id="list">
            <li>上海</li>
            <li>北京</li>
        </ul>
        <input type="button" value="创建" onclick="creat()"/>
        <input type="button" value="复制" onclick="copy()"/>
        <input type="button" value="删除" onclick="del()"/>
        <input type="button" value="插入"/>
        <input type="button" value="替换"/>
    </Body>
</html>

06 列表框增删改操作

<!DOCTYPE html>
<html>
    <head>
        <script>
            /*  对列表框,下拉菜单添加选项
                1.创建对象
                new Option(text,value,defaultSelected,selected)
                    参数不需要全写
                2.将对象添加到列表框或下拉菜单
                列表框/下拉菜单对象.option[i]=创建好的option对象
                删除列表框对象:
                    列表框/下拉菜单对象.remove(index) 或 对象.option[index]=null
            */
            function creatSelect(){
                var element = document.createElement("select");
                for(var i= 0;i<10;i++){
                    var op = new Option("new"+i,i);
                    element.options[i] = op;
                }
                element.size = 5;
                element.id = "city";
                document.getElementById("begin").appendChild(element);
            }
            function delSelect(){
                var city = document.getElementById("city");
                if(city.options.length>0)
                    //city.remove(city.options.length-1);
                    city.options[city.options.length-1] = null;
            }
        </script>
        <br/><br/>
        <hr/>
        <div id="begin" style="width:60px; height:90px;background-color: aqua"></div>
        <input type = "button" onclick="creatSelect()" value="创建"/>
        <input type="button" onclick="delSelect()" value = "删除"/>
    </Body>
</html>

07 表格增删改操作

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body id="test">
        <input type="button" value="创建" onclick="creatTable()"/>
        <input type="button" value="删除最后行" onclick="deleteTable()"/>
        <input type="button" value="删除最后单元格" onclick="deleteCell()"/>
        <script>
            /*
                1.增删表格内容
                    insertRow(index)        在索引位置插入下一行
                    createCaption()          为表格创建标题
                    createTFoot()            为该表格创建<tfoot.../>
                    createTHead()            为该表格创建<thead.../>
                    deleteRow(index)        删除index行
                    deleteCatption()        删除表格标题
                    deleteTFoot()           删除表格<tfoot>元素
                    deleteTHead()           删除表格<THead>元素
                2.增删单元格
                    insertCell(index)       在index处插入一个单元格并返回
                    deleteCell(index)       删除index处单元格
            */
            function creatTable(){
                with(document){
                    var b = getElementById("test");
                    var t = createElement("table");
                    t.border = "1";
                    t.id = "mytable";
                    var caption = t.createCaption();
                    caption.innerHTML = "我的表格";
                    for(var i= 0;i<5;i++){
                        var tr = t.insertRow(i);
                        for(var j = 0;j<4;j++){
                            var td = tr.insertCell(j);
                            td.innerHTML = "单元格"+i+j;
                        }
                        b.appendChild(t);
                    }
                }
            }
            function deleteTable(){
                var t = document.getElementById("mytable");
                if(t.rows.length-1)
                    t.deleteRow(t.rows.length-1);
           }
           function deleteCell(){
                var t = document.getElementById("mytable");
                var lastRow = t.rows[t.rows.length-1];
                if(lastRow.cells.length>0){
                    lastRow.deleteCell(lastRow.cells.length-1);
                }
           }
        </script>
    </body>
</html>