JavaScript-DOM与事件

1.DOM

DOM（文档对象模型）（Document Object Model）在网页上，组织页面的对象被组织在一个树形结构中，用来表示文档中对象的标准模型。
节点：节点就是对象

<html>
   <head>
       <title>理解DOM</title>
   </head>
   <body>
       <p>今天天气<span style="color:red;font-size:30px;">很好</span>，昨天很冷</p>
   </body>
</html>

这里写图片描述

2.事件

事件：在C#中是一个委托变量（事件的编程概念）在JavaScript中是一个方法
为节点添加事件的方法：

<node>.onclick=function(){};

获得节点：

document.getElementById("id的字符串")//节点对象，获得页面中指定ID的节点对象
document.getElementsByTagName("标签名")//节点集合
//如果元素是节点，那么他可以有子节点
<node>.ChildNodes   //获得节点下的所有子节点
<node>.firstChild-><node>.childNodes[0] //获得第一个子节点
<node>.lastChild //获得最后一个子节点
//<node>.childNodes[<node>.childNodes.
//length-1]

修改节点：

//所谓修改节点就是修改节点的属性和属性所包含的文本
//获得节点
//修改属性的标准方法
<node>.getAttribute("属性名","值")；

3.实例

//修改节点属性
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">

        </style>

        <script type="text/javascript">
            onload=function(){             
                var btn=document.getElementById("btn");
                btn.onclick=function(){
                    var txtNode=document.getElementById("txt");
                    var txt=txtNode.value;
                    var p=document.getElementById("p");
                    p.setAttribute("style",txt);
                }           
            }       
        </script>
    </head>
    <body>
        <p id="p">
          我是一个大美女
        </p>
        <textarea id="txt" style="width:400px;height:300px;"></textarea>
        <br/>
        <input type="button" value="点击" id="btn"/>  
    </body>

</html>

结果显示：
这里写图片描述

->换图片例子
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">

        </style>                 
        <script type="text/javascript">
            onload = function(){
               document.getElementById("btn").onclick=function(){
                    var txt=document.getElementById("address").value;
                    document.getElementById("show").src=txt;
               };
            };      
        </script>
    </head>
    <body>
        <input type="text" id="address" style="width:80%;"/><br/>
        <input type="button" value="显示" id="btn"/><br/>
        <img src="" id="show"/>
    </body>
</html>

结果：
这里写图片描述

4.小结

想象和实际操作是不一样的，比如写错个字母，地址不对，不去写永远觉得自己写的是对的。

JavaScript-DOM与事件

猜你喜欢