javascript_19-DOM初体验

时间：2019-07-14 23:04:10 收藏：0 阅读：119

DOM

DOM: 文档对象模型（Document Object Model），又称为文档树模型。是一套操作HTML和XML文档的API。

DOM可以把HTML和XML描述为一个文档树。树上的每一个分支都可以视为一个对象，通过DOM可以添加、修改和移除文档上的某一部分。

DOM的相关概念

DOM就是把HTML视为一个层次结构（树形结构）的文档
文档（Document）：就是指HTML或者XML文件
节点（Node）：HTML文档中的所有内容都可以称之为节点
元素（Element）：HTML文档中的标签可以称之为元素
文档元素（根元素）：文档的第一个元素，HTML文档元素就是<html>
文本节点
属性节点
父节点 parent
子节点 child
兄弟节点 silbing

DOM可以做什么

找对象（元素）
设置元素的属性
设置元素的样式
动态创建和删除元素
事件--触发响应
- 事件源（事件的触发者）
- 事件名称
- 事件响应程序

DOM初体验

<a onclick="alert(‘aaa‘); return false"></a> 取消a标签的默认行为。
找到id是link1的dom对象（a标签）

要等到标签生成之后，再来获取对应的dom对象。所以要注意<script>在文档中的位置。

var link1 = document.getElementById("link1");

//给link1注册单击事件
//事件的三要素
    //事件源--事件的触发者link1
    //事件处理程序--onclick == 匿名函数
    //事件名称 click

link1.onclick = function(){
    alert("hahah");
    //取消a标签默认行为的执行
    return false;
}

给a标签注册多个事件

//1 能够点击
    //获取页面上的a标签
    document.getElementById();

    var links =document.getElementsByTagName();
    for (var i = 0; i<links.length;i++){
        var link =links[i]; //获取每一个a标签
        //给link对象注册时间
        link.onclick = function(){

            //....
            //获取 要改变的dom元素对象
            //获取 要改变的动作
            //替换 
                            
            //取消a的默认行为
            return false;
        }       
    }

原文：https://www.cnblogs.com/hukuangjie/p/11186303.html