HTML与JavaScript交互及DOM操作实例解析-优快云博客

一、事件处理

事件是用户操作html元素的过程，html元素有很多事件，当用户触发了某个事件时，就会执行事件中的javascript 代码

<html lang="en">
    <head>
        <title>Document</title>
        <script>
            function btnonclick(){
                alert('点击了按钮');
            }
            function btnonmouseover(){
                alert('鼠标悬停在按钮上了');
            }
        </script>
    </head>
    <body>
        <input type="button" value="确定" onclick="btnonclick();" onmouseover="btnonmouseover();"> 
        <!--二者有冲突-->
    </body>
</html>

二、DOM编程

DOM是Document Object Model 文档对象模型。是一种对文档处理的编程思路，也是一种编程接口，提供了一些 API方法对文档进行处理。

DOM把整个的html文档当成了一个对象树结构，实质浏览器在运行html代码时，也是将html中所有的元素、属性、文本创建在一个对象树中，可以操作对象树上的任何对象、对象的属性、对象的文本等。

DOM是一个编程接口，提供了一些API方法，而javascript就是实现了DOM编程接口的一种语言

常用的API方法包括：

1. document.getElementById("id值") : 通过id获得一个对象

<html lang="en">
<head>
    <title>点击按钮交换两个输入框中的值</title>
    <script>
        function btnonclick(){
            var t1 = document.getElementById("text1");
            var t2 = document.getElementById("text2");
            //所有元素的value属性值 默认都是字符串类型
            var temp = t1.value;
            t1.value = t2.value;
            t2.value = temp;
            parseInt(t1.value)
        }
    </script>
</head>
<body>
    <input type="text" id="text1"><input type="text" id="text2" >
    <input type="button" value="交换输入框的值" onclick="btnonclick();" >
</body>
</html>

2. document.getElementsByName("name值") ：通过名字获得一些对象，应为名字可以重复，这个函数获得的是数组，数组里存储着通过名字获得的那些对象。

<html lang="en">
    <head>
        <title>Document</title>
        <script>
            function btnonclick(){
                //通过名字获得输入框对象 数组
                var texts = document.getElementsByName("text");
                for(var i = 0;i<texts.length;i++){
                    alert(texts[i].value);
                }
            }
        </script>
    </head>
    <body>
        <input type="text" name="text">
        <input type="text" name="text">
        <input type="text" name="text">
        <input type="text" name="text">
        <input type="button" value="获取值" onclick="btnonclick();" >
    </body>
</html>

<!doctype html>
<html lang="en">
    <head>
        <title>Document</title>
        <script>
            function btnonclick(){
                //通过名字获得多选框对象 数组
                var texts = document.getElementsByName("text");
                //那些checkbox选中了
                for(var i = 0;i<texts.length;i++){
                    //alert(texts[i].checked);
                    //texts[i].checked = !texts[i].checked;
                }
            }
        </script>
    </head>
    <body>
        <input type="checkbox" name="text">
        <input type="checkbox" name="text">
        <input type="checkbox" name="text">
        <input type="checkbox" name="text">
        <input type="button" value="获取值" onclick="btnonclick();" >
    </body>
</html>

3. document.getElementsByTagName("元素标记名") ：通过一个标记名获得一些元素

<html lang="en">
    <head>
        <title>Document</title>
        <script>
            function btnonclick(){
                //通过名字获得输入框对象 数组
                var texts = document.getElementsByTagName("input");
                for(var i = 0;i<texts.length;i++){
                    alert(texts[i].value);
                }
            }
        </script>
    </head>
    <body>
        <input type="text" name="text">
        <input type="text" name="text">
        <input type="text" name="text">
        <input type="text" name="text">
        <input type="button" value="获取值" onclick="btnonclick();" >
    </body>
</html>

4. document.write("html代码") ： 将一段html 写入到body中

5. 节点对象.parentNode属性： 获得节点对象的父节点对象

6. 节点对象.childNodes : 获得装有子节点的数组 document.getElementById示例