MyException - 我的异常网
当前位置:我的异常网» .NET相关 » 如鹏网学习笔记(10)DOM

如鹏网学习笔记(10)DOM

www.MyException.Cn  网友分享于:2013-08-29  浏览:0次
如鹏网学习笔记(十)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>

文章评论

Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
如何成为一名黑客
如何成为一名黑客
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员应该关注的一些事儿
程序员应该关注的一些事儿
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
一个程序员的时间管理
一个程序员的时间管理
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
 程序员的样子
程序员的样子
老程序员的下场
老程序员的下场
总结2014中国互联网十大段子
总结2014中国互联网十大段子
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Java程序员必看电影
Java程序员必看电影
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
那些争议最大的编程观点
那些争议最大的编程观点
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
我是如何打败拖延症的
我是如何打败拖延症的
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员的鄙视链
程序员的鄙视链
程序员必看的十大电影
程序员必看的十大电影
程序员都该阅读的书
程序员都该阅读的书
中美印日四国程序员比较
中美印日四国程序员比较
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为什么程序员都是夜猫子
为什么程序员都是夜猫子
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
漫画:程序员的工作
漫画:程序员的工作
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
程序员和编码员之间的区别
程序员和编码员之间的区别
旅行,写作,编程
旅行,写作,编程
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
编程语言是女人
编程语言是女人
代码女神横空出世
代码女神横空出世
我的丈夫是个程序员
我的丈夫是个程序员
每天工作4小时的程序员
每天工作4小时的程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有