如鹏网学习笔记(十)DOM

DOM笔记
一、DOM简介
  Document Object Model 文档对象模型
  DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点
  DOM API 编程接口 可以用来操作页面的任意一部分内容
  js+DOM编程的思想:由js基本语法控制程序的执行逻辑,由DOM API进行元素的查找获取,进而再对元素进行增删改等操作

  学习DOM,除开学习设计思想外,更多的是学习DOM API的用法

二、document对象
  document对象,
    是Windows对象的一个属性,
    表示整个HTML页面,是DOM的核心对象,
    是连接JavaScript和DOM的桥梁,使得我们可以在JavaScript环境中操作页面内容,
    提供了查找获取元素节点的方法,所以document是DOM的编程入口,
    此外还提供了创建新节点的方法

三、document对象获取对象的方法
  1,getElementById(String) 返回 Element 根据元素的id属性值获取元素

  2,getElementsByTagName(String) 返回 NodeList数组 根据元素的标签名获取元素

  3,getElementsByName(String) 返回 NodeList数组 根据元素的name属性值获取元素

    nodeList.length   包含的元素个数

    nodeList.item(index)    获取指定索引位置的元素

    注意:NodeList是动态更新的,即如果删除的元素也在NodeList里面,那么也同时从NodeList里面删除

四、document创建新元素的方法

  document.creatElement(tagName) 根据元素标签名称创建元素节点

五、document添加新元素的方法

  1,先创建要添加的元素
    var element = document.createElement(tagName)

  2,获取要添加元素的节点

    var element = document.getElementById(String)

  3,使用元素的方法appendChild(node)方法进行添加

六、Element操作元素的属性

  有两种方式操作元素的属性

    1,直接使用element.属性名 :
      var 变量名 = element.属性名;//获取属性值
      element.属性名 = 属性值; //给属性赋值

      注意:
        a,因为class是关键字,所以操作class属性时使用className代替
        b,这种方式只能操作HTML标准规定的属性,不能操作自定义属性
        c,在js中,操作checkbox、radio的checked属性,select的selected属性值时,使用true或FALSE,表单元素的disable属性也是如此

    2,另外三种操作属性,且可操作自定义属性
      a,var 变量名 = getAttribute("属性名");   获取属性值
      b,removeAttribute("属性名");    删除指定属性,没有返回值
      c,setAttribute("属性名",“新属性值”);    修改/添加属性

七、Element操作元素的子节点
  子节点包括子元素和元素文本内容

  element.getElementsByTagName() 根据子元素的标签名获取其内部的子元素

  element.innerHTML("要写入的HTML语句"); 以字符串的形式在该子节点内部插入HTML语句

  element.insertBefore(newNode,node); 在子节点内部,在指定子节点前插入新子节点

  element.appendChild(newNode); 在最后追加子节点

  element.removeChild(); 删除指定的子节点

八、操作样式属性

  两种方式:
    1, element.style CSSStyleDeclaration类型的对象

      使用 element.style.属性名 的方式可以直接操作某个样式属性。

      如:element.style.backgroundColor="gray";

        注意:CSS中样式属性使用“-”连接两个单词,js中使用后面的单词首字母大写的方式连接!!

    2, element.className = "另一个className"; 效果:空字符串可以实现删除,可以实现指向另一个类,病通过CSS控制效果的切换

九、DOM事件机制
  当浏览器状态改变、用户操作时都会出发一些事件。如:点击了一个按钮,出发了按钮点击的时间,按钮称为事件源

  当一个时间被触发时,浏览器就会创建一个event事件对象,这个时间对象包含和此时间相关的 各种信息,如点击时间的时间对象包含点击文字的信息,可供编程者使用

  如果希望当一个时间发生时针对这个时间做一些处理,就可以给该时间注册一个事件处理函数,时间触发时,该函数会被调用

  常见的事件有以下几类:
    1,窗体事件
      页面加载完成事件
      load 页面加载完成时触发(window对象为事件源)
      <script type="text/javascript">

        window.onload=function(){
        //只有页面加载完成,才可确保id为div01的元素被获取到
        var element = document.getElementById("div01");
        alert(element);
        }

      </script>

      注意:load是事件的名称,onload是元素的属性,用来给元素注册事件处理函数

    2,鼠标事件
      1,
        onclick、ondblclick 鼠标单击、双击时触发
        示例代码:
        <script type="text/javascript">
          window.onload=function(){
            getElementById("div01").onclick=function(){
              alert("点到我了");
            }
            getElementById("div02").ondblclick=function(){
              alert("双击到了");
            }
          }
        </script>

        onmouseover、onmouseout    鼠标指针经过或者移出元素时触发的事件

        onmousemove     鼠标指针移动时触发(进入元素后)

        onmousedown、onmouseup     鼠标按键按下、弹起时触发(进入元素后)

    2,鼠标事件的event对象包含如下信息:
      button 点击的那个鼠标按键(0、1、2)
      altKey、ctrlKey、shiftKey    点击时是否同时按下键盘的alt、ctrl、或者shift按键
      clientX、clientY    鼠标指针的窗口坐标
      screenX、screenY    鼠标指针的屏幕坐标

      示例代码:
      <script type="javascript">
        window.onload=function(){
            getElementById("div01").onmousedown=function(){
              alert(event.button);//打印出当前事件中鼠标按下的是哪一个按键
              alert(event.altKey+event.ctrlKey+event.shiftKey);//打印出当前事件中鼠标按下时是否按了相应的按键
            }
        }
      </script>

    3,键盘事件

    4,焦点事件

    5,页面加载完成事件

      onload 页面加载完成时触发(window对象为事件源)
      示例代码:
      <script type="text/javascript">
        window.onload=function(){
          var element = document.getElementById("div01");
          alert(element);
        }
      </script>

   处理事件的两种方式

    1,通过DOM方式把时间处理函数赋值给事件属性(称为注册事件处理函数)
    示例代码:
    <script type="text/javascript">
      window.onload=function(){
        document.getElementById("div01").onclick=function(){
          alert("这是注册事件处理函数的方式");
        }
      }
    </script>

    2,直接在HTML元素标签的事件属性上写要执行的代码
      示例代码:
      <div onclick="alert(‘这是直接在元素标签的事件属性上写执行方法的方式‘);"></div>

    第一种处理方式的优先级大于第二种!!!!!

    注意:

        如果有个自定义函数fun1,
        按照第一种方式的写法为 element.onclick=fun1;//注意是将fun1这个函数的对象(不能带括号),赋值给onclick
        按照第二种方式的写法为 onclick=fun1();//在元素的标签里写上函数的调用

十、this的用法

  示例代码:
    <script type="javascript">
      function(){
        alert(this);
      }
      window.onload=function(){
        var obj = {"fun1",fun1};
        var btn = document.getElementById("btn");
        btn.onclick=fun1;

        window.fun1();//打印出window对象
        obj.fun1();//打印出Object对象
        btn.onclick();//打印出button对象
      }
    </script>

    总结:如果this在函数fun1内,函数fun1以哪个对象的属性值的身份去执行,this就表示哪个对象

    其他情况如果不容易判断的话就实际测试一下:
    

    示例代码:
      <input type="button" onclick="alert(this)"/>//打印出button对象
      <input type="button" onclick="fun1()"/>//打印出window对象

十一、给一个事件注册多个事件处理函数
  1,注册事件处理函数的方式会覆盖直接编写处理代码的方式,而且同时注册的多个处理函数也会发生覆盖,
    这就导致一个事件发生时我们只能做“一件事情”

  2,为了可以给一个事件注册多个事件处理函数,DOM提供了另外一种注册方式:
    addEventListener("事件名称",处理函数);
    示例代码:
    <script type="javascript">
      div.addEventListener("click",function(){
        alert("第三种处理函数方式")
      });
    </script>

    特点:不会发生覆盖,可以同时注册相同的事件

    注意:多次注册同一个函数,效果只有一次

  3,删除一个处理函数

    如果希望将来可以删除某个注册的处理函数,就应该拿到该处理函数的引用。

    removeEventListener(事件名称, 处理函数);

    示例代码:
    <script type="javascript">
      var fun1=function(){
        alert("第三种处理函数方式");
      };
      div.removeEventListener("click",fun1});
    </script>

十二、事件冒泡

  1,由于HTML元素可以嵌套,就不可避免的出现当用户执行一个动作,如点击时,会有多个元素触发点击事件。
    为了方便管理,不至于混乱,DOM提供了事件冒泡机制。

    事件冒泡:当若干嵌套的元素“同时”被触发某个事件时,最内层元素的事件最先被触发,事件依次向外传递。
    示例代码:
    <script type="javascript">
      window.onload=function(){
        var div01 = document.getElementById("div01");
        var div02 = document.getElementById("div02");
        var div03 = document.getElementById("div03");
        div01.onclick=function(){
          alert("div01");
        }
        div02.onclick=function(){
          alert("div02");
        }
        div03.onclick=function(){
          alert("div03");
          div03.stopProgagation();//取消事件冒泡
        }
        //当点击最里面的div03时,外层的div02和div01都会触发事件,这就是事件冒泡
      }
    </script>

  2,如果某刻希望取消该事件的冒泡,可以使用event.stopProgagation();

十三、键盘事件
  keydown 键盘按键被按下

  keyup 键盘按键被弹起

  event事件对象的属性:

  event.keyCode 被按下的按键的整数编码

十四、取消某些事件的浏览器默认动作

  对于某些元素的特点事件,浏览器会有一个默认的动作,如超链接触发点击事件时页面会跳转、表单提交事件被触发时变淡数据会被提交到服务器、键盘按下在输入框输入字符等

  DOM提供了两种方式来取消浏览器的默认动作:
    1,在我们自己注册的处理函数中执行event.preventDefault();
    2,return false;

  注意:取消事件的浏览器默认动作和取消事件冒泡是不同的概念

十五、焦点事件
  focus    元素获得焦点
  blur    元素失去焦点

十六、表单事件
  select input(text)、textarea里的文本被选中时触发

  change input(text)、textarea的值改变时触发

  submit 表单提交时触发(真正把数据提交到服务器前触发)

十七、获得一个元素的坐标的写法

  <script type="javascript">
    var x = div02.offsetLeft;
    var y = div02.offsetTop;

    var parent = div02.offsetParent;

    while(parent){
      x += parent.offsetLeft;
      y += parent.offsetTop;
      parent parent.offsetParent;
    }
  </script>

时间: 2024-10-29 19:07:54

如鹏网学习笔记(十)DOM的相关文章

如鹏网学习笔记(七)HTML基础

HTML笔记 一.HTML简介 1,HTML (Hyper Text Mark-up Language) 超文本标记语言,是一种编程语言,也可以说是一种标准.规范. 2,HTML提供了一系列标记(标签),每个标记都有不同的含义和作用,浏览器根据标记的含义把内容显示到浏览器页面上 3,超文本:页面不仅可以包含普通文本,还可以包含图片.链接.音乐.程序等非文本内容 4,学习HTML主要是学习常用标签的用法和语法规范 二.基本标签 <!DOCTYPE> 定义文档类型,表明该文档的类型和版本(了解)

如鹏网学习笔记(四).Net常用类库

.Net常用类库 一.String成员方法(常用) 1,bool Contains(string str) 判断字符串对象是否包含给定的内容 2,bool StartsWith(String str):判断字符串对象是否以给定的字符串开始. 3,bool EndsWith(String str):判断字符串对象是否以给定的字符串结束. 案例:判断是否是网址:以http://开头.以.com或者.cn结尾. 案例:判断用户输入的邮件是否是QQ邮箱,用户输入的用户名是否包含"毛ze东"等敏

如鹏网学习笔记(十四)ASP.NET

Asp.net笔记 一.Socket类 进行网络编程的类,可以在两台计算机之间进行网络通讯 过程: 向服务器发送指令: GET /index.html HTTP/1.1 Host:127.0.0.1:8080 回车空行 二.浏览器是什么 浏览器就是一个Socket网络客户端,帮助用户请求网站服务器上的内容并且将返回的内容渲染为图形化内容 浏览器的过程: 用户在浏览器输入网址,浏览器向DNS服务器发出Socket请求, 服务器把请求的内容返回给浏览器, 浏览器将内容进行解析并渲染绘制成页面展现,

如鹏网学习笔记(十二)HTML5

一.HTML5简介 HTML5是HTML语言第五次修改产生的新的HTML语言版本 改进主要包括: 增加新的HTML标签或者属性.新的CSS样式属性.新的JavaScript API等.同时删除了一些过时的和样式相关的HTML标签和属性 给网页带来了新的特性: 多媒体支持.本地存储.图形绘制和样式特效等 二.新的多媒体标签 1,<video> 用来在页面播放视频 部分属性: src 要播放的视频的地址 width 设置播放器的宽度,单位px height 设置播放器的高度,单位px contro

如鹏网学习笔记(九)JavaScript

JavaScript笔记 一.JavaScript简介 1,JavaScript是一种计算机编程语言,可以像等其他编程语言那样定义变量,执行循环等. 2,JavaScript代码主要执行在浏览器上,为HTML页面提供动态效果 3,而且JavaScript是一种脚本语言,它的代码是解释执行的,也就是解释一句代码后就会执行这句代码 4,JavaScript可简称为 js 二.js变量声明 1,js是弱类型语言,弱类型并不是说数据本身没有类型,而是变量没有类型. 如一个变量a,a的值既可以是字符串类型

如鹏网学习笔记(十一)JQuery

一.jQuery简介 jQuery是一个JavaScript库,特性丰富,包含若干对象和很多函数,可以替代传统DOM编程的操作方式和操作风格 jQuery通过对DOM API.DOM事件的封装,提供了一套全新的API,更简单和灵活 jQuery宗旨:write less,do more. jQuery解决了不同浏览器之间的兼容性问题,不用考虑兼容性 示例代码: <script type="text/javascript" src="引入的jQuery库的地址"

如鹏网学习笔记(五)MySql基础

MySQL基础 一.数据库概念 1,网友装备信息.论坛帖子信息.QQ好友关系信息.学籍管理系统中的学生信息等都要"持久化"的保存到一个地方, 如果通过IO写到文件中,那么会非常麻烦,而且不利于多人共享数据 2,我们开发大部分软件.网站都要大量用到书库,甚至开发游戏.手机App也要用到数据库,公司面试的时候数据库的考核在三分之一以上 3,数据库(DataBase)是保存数据的仓库,可以方便的把数据放进去,并且把数据根据各种需要取出来. 数据库管理系统(Database Managemen

如鹏网学习笔记(十三)EasyUI

一.EasyUI简介 是一组基于JQuery的UI插件集合 主要作用:为JQuery对象提供新的方法,实现新的功能 可以快速创建出简洁.友好.美观的页面,非常适合做网站后台管理页面(不够漂亮,不适合做前台页面) 官方文档:http://www.jeasyui.com/documentation/index.php 二.panel组件的创建 分两步: 1,引入需要的样式文件和js文件 <link rel="styleSheet" type="text/css"

如鹏网学习笔记(八)CSS

CSS 一.CSS简介 1,CSS (Cascading Style Sheets) 级联样式表 ,是一种计算机语言,用来控制HTML内容的显示效果 2,CSS预先定义了众多的和显示效果有关的样式属性,比如color.font-size等.如果希望html内容显示某个效果,就应用对应的CSS样式属性即可 3,CSS对样式的控制是非常精确和精细的 二.CSS语法 1,CSS语言的基本单位是样式声明:proppertyName:value; 2,CSS语言的使用方式: 1,把CSS样式声明作为HTM