zoukankan      html  css  js  c++  java
  • javascript_19-DOM初体验

    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;
    		}		
    	}
  • 相关阅读:
    Linux中的MyEclipse配置Hadoop
    C#学习笔记(三)
    关于读博,关于成为一个专家
    C#查找子串在原串中出现次数
    C#学习笔记(二)
    Matlab中sortrows函数解析
    C#学习笔记(一)
    甘特图与网络图
    ubuntu开启SSH服务
    分词错误重点分析这几项
  • 原文地址:https://www.cnblogs.com/hukuangjie/p/11186303.html
Copyright © 2011-2022 走看看