首页 > 编程语言 > 详细

javascript_19-DOM初体验

时间:2019-07-14 23:04:10      阅读:119      评论:0      收藏:0      [点我收藏+]

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;
        }       
    }

javascript_19-DOM初体验

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!