Javascript（下）——HTML DOM，HTML BOM,HTML（常用）

1、 HTML DOM

作用：定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
如何获取、修改、添加或删除 HTML 元素。

HTML DOM 对象

Element对象：在HTML DOM中，Element对象表示HTML元素，通过Document对象的getElementById()方法、getElementsByTagName()或getElementsByName()方法获取Element对象。

element对象属性：

element.className属性：设置或返回元素的 class 属性。
语法：HTMLElementObject.className=classname
element.innerHTML属性：设置或返回元素的 inner HTML。
语法：HTMLElementObject.innerHTML=text

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul id="fruit">
            <li>苹果</li>
            <li>水蜜桃</li>
        </ul>
        <script>
            var element = document.getElementById("fruit");
            var liArray=element.getElementsByTagName("li");
            element.getElementsByTagName("li")[0].innerHTML="香蕉";
            for(var i=0; i<liArray.length; i++){
                console.log(liArray[i]);//输出：香蕉 水蜜桃
            }
        </script>
    </body>
</html>

element对象方法：

element.getElementsByTagName()方法：返回拥有【指定标签名】的所有子元素的【集合】。括号里填标签的名字，且这个方法是一个数组，有多个同样标签时，后面得加[数字]，表示是第几个标签。

var list=document.getElementsByTagName("UL")[0]
list.getElementsByTagName("LI")[0].innerHTML="Milk";

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul id="fruit">
            <li>苹果</li>
            <li>水蜜桃</li>
        </ul>
        <script>
            var element = document.getElementById("fruit");
            var liArray=element.getElementsByTagName("li");
            for(var i=0; i<liArray.length; i++){
                console.log(liArray[i]);//输出：苹果 水蜜桃
            }
        </script>
    </body>
</html>

element.setAttribute()方法：添加指定的属性，并为其赋指定的值。
语法：element.setAttribute(“属性名”，“属性值”)

element.removeAttribute()方法：删除指定的属性。
语法：element.removeAttribute(“属性名”)

<div class="tts"></div>
<script>
    var div=document.getElementsByTagName("div")[0];
    div.setAttribute("class","tts");
    div.removeAttribute("class");
</script>

2、HTML BOM

BOM：
BOM提供了一系列与浏览器窗口进行交互的对象，每个对象都提供了很多方法与属性，【Window对象是其顶层对象】；使用这些对象可以访问和操控浏览器窗口，这些操作不与页面内容发生直接联系。

1、window对象

Window对象表示【一个浏览器窗口或一个框架】；如果文档包含框架（frame或iframe标签），浏览器除为HTML文档创建一个Window对象外还为每个框架创建一个额外的Window对象。
属性
1、location：Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" onclick="check()" value="确认" />
        <script>
            function check(){
                window.location.href="http://www.baidu.com";//点击确认按钮，打开百度页面，window也可以取消
            }
        </script>
    </body>
</html>

2、history对象

来表示窗口的浏览历史。可通过 window.history 属性对其进行访问。
功能只有back()、forward() 和 go() 方法。

方法
1、alert():显示带有一段消息和一个确认按钮的警告框。
2、confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input type="button" onclick="check()" value="确认" />
        <script>
            function check(){
                /*alert("窗口");
                var test=confirm("你确定要退出吗？");
                if(test){
                    console.log("退出");
                }else{
                    console.log("不退出");
                }
            }
        </script>
    </body>
</html>

3、
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

clearInterval()：可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

setTimeout()：在指定的毫秒数后调用函数或计算表达式。只执行 code 一次。
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

setInterval()与setTimeout()的区别：
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭；setTimeout() 只执行 code 一次，如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()；

window对象的属性和方法为JavaScript全局变量和全局函数，可以直接使用：

window.alert(“HelloWorld！”)；
alert(" HelloWorld ！")；

<script>
    var i=1;
        function changes(){
            var element=document.getElementById("image");
            element.src="../img/"+i+".jpg";
            i++;
            if(i==4){
                i=1;
            }
        }
        var d=setInterval("changes()",4000);//4秒变化一次
        function stop(){
                clearInterval(d);
            }
            stop();//结束setInterval()

</script>

3、Document对象

该对象是Window对象的一部分，可通过window.document属性获取该对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Document对象属性：

domain：返回当前文档的域名。语法：document.domain
URL：可返回当前文档的 URL。语法：document.URL

Document对象：getElementById()方法、getElementsByTagName()或getElementsByName()方法获取Element对象。

getElementById() 方法：可返回对拥有【指定 ID】的【第一个对象】的引用。
语法：document.getElementById(id)
getElementsByName() 方法：可返回带有【指定名称】的对象的【集合】。
语法：document.getElementsByName(name)

1、它查询元素的 name 属性。
2 、因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是【元素的数组】，而不是一个元素。

getElementsByTagName() 方法：可返回带有【指定标签名】的【对象的集合】。
语法：document.getElementsByTagName(tagname)

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

3、HTML 对象

1、Form 对象

Form 对象代表一个 HTML 表单。

1、form对象集合：elements[]：包含表单中所有元素的数组。
语法：formObject.elements[].property
2、属性：action：可设置或返回表单的 action 属性。
action 属性定义了当表单被提交时数据被送往何处。formObject.action=URL

var form=document.getElementsByTagName("form")[0];
form.action="https://www.baidu.com/s";

3、方法：
reset()：把表单中的元素重置为它们的默认值。formObject.reset()

<html>
    <head>
    <script type="text/javascript">
    function formReset(){
        document.getElementById("myForm").reset()
    }
    </script>
    </head>
    <body>
        <p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p>

        <form id="myForm">
        姓名：<input type="text" size="20"><br />
        年龄：<input type="text" size="20"><br />
        <br />
        <input type="button" onclick="formReset()" value="重置">
        </form>
    </body>
</html>

submit()：把表单数据提交到 Web 服务器。formObject.submit()

<html>
    <head>
    <script type="text/javascript">
        function formSubmit(){
            document.getElementById("myForm").submit()
        }
    </script>
    </head>
    <body>
        <p>在下面的文本框中输入一些文本，然后点击提交按钮就可以提交表单。</p>

        <form id="myForm" action="/i/eg_smile.gif" method="get">
        名：<input type="text" name="firstname" size="20"><br />
        姓：<input type="text" name="lastname" size="20"><br />
        <br />
        <input type="button" onclick="formSubmit()" value="提交">//注意button与onclick的结合使用相当于type="submit"
        </form>
    </body>
</html>

2、Text 对象

Text 对象代表 HTML 表单中的文本输入域。
在 HTML 表单中 <input type="text">每出现一次，Text 对象就会被创建。

text属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <input name="wd"/>
            <input type="button" onclick="submitForm()" value="百度一下"/>
        </form>

        <script>
            var form=document.getElementsByTagName("form")[0];
            form.action="https://www.baidu.com/s";

            var text=document.getElementsByName("wd")[0];
            text.focus();//进去页面就获取焦点，可以应用于function里面
            function submitForm(){
                text.value="郑州";
                console.log(text.value);
                text.readOnly=true;
                console.log(text.readOnly);
                text.disabled=true;
                console.log(text.disabled);//当其为true时禁用，输入框里不能使用；为false时输出

                form.submit();//提交
                //type为text、password、textarea标签均有value、readonly.disabled属性，focus()方法
            }
        </script>
    </body>
</html>

text方法

3、Radio 对象

Radio 对象代表 HTML 表单中的单选按钮。

Radio 对象属性：指的是表单中的某一个。
Radio 对象方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form onsubmit="return check()"><!--一定要有return-->
            <input type="radio" name="sex" value="0"/>男<input type="radio" name="sex" value="1"/>女
        </form>
        <script>
            function check(){
                var radios=document.getElementsByName("sex");
                for(var i=0;i<radios.length;++i){
                    var radio=radios[i];
                    radio.disabled=true;
                    console.log(radio.checked+" - "+radio.value);
                }
            }
        </script>
    </body>
</html>

4、Checkbox 对象

Checkbox 对象代表一个 HTML 表单中的 一个选择框。

Checkbox 对象属性：
Checkbox 对象方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form onsubmit="return check()"><!--一定要有return-->
            <input type="checkbox" name="hobby" value="0"/>篮球
            <input type="checkbox" name="hobby" value="1"/>游泳
            <input type="checkbox" name="hobby" value="2"/>跑步
        </form>

        <script>
                var checkboxes=document.getElementsByName("hobby");
                for(var i=0;i<checkboxes.length;++i){
                    var checkbox=checkboxes[i];
                    checkbox.disabled=true;//因被禁用，不能选择
                    console.log(checkbox.checked+" - "+checkbox.value);//checked输出true或false，选中为true
                }
        </script>
    </body>
</html>

5、Select 对象

Select 对象代表 HTML 表单中的一个下拉列表。

select对象集合
option[]——返回包含下拉列表中的所有选项的一个数组。
select对象属性
select对象方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="grade">
            <option value="1">大一</option>
            <option value="2">大二</option>
            <option value="3">大三</option>
            <option value="4">大四</option>
        </select>
        <input type="button" onclick="tack()" value="确认"/>

        <script>
            function tack(){
                var select=document.getElementById("grade");
                console.log(select.disabled);//是否禁用，输出false
                console.log(select.selectedIndex);//输出被选项目的索引号
                console.log(select.length);//输出其长度

                var options=select.options;
                console.log(options[select.selectedIndex].value);//被选中的value的值

                for(var i=0;i<options.length;i++){
                    console.log(options[i].value);
                    console.log(options[i].selected);//是否被选中：true或false
                    console.log(options[i].text);//option中的文本
                }
            }
        </script>
    </body>
</html>

6、Option 对象

Option 对象代表 HTML 表单中下拉列表中的一个选项。
Option 对象构造方法
Option(text,value)——通过text和value值创建Option对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <select id="grade">
            <option value="1">大一</option>
            <option value="2">大二</option>
            <option value="3">大三</option>
            <option value="4">大四</option>
        </select>
        <input type="button" onclick="tack()" value="确认"/>

        <script>
            function tack(){
                var select=document.getElementById("grade");
                var option=new Option("研一","5");
                select.add（option）;//添加一个选项
                //select.remove（"大一"）;删除一个选项
                }
            }
        </script>
    </body>
</html>

Option 对象属性：