zoukankan      html  css  js  c++  java
  • DOM总结

    主要包括


    1.事件

    a)

    事件三要素:

    事件源

    事件

    事件处理程序

    b)

     2.js三个组成部分

    ECMAScript  欧洲计算机制造商协会   描述js的语法和基本对象

    DOM 文档对象模型  处理网页内容的方法和接口

    BOM 浏览器对象模型 与浏览器交互的方法和接口

    3.DOM 节点

    a)DOM 是为了让js操作html元素制定的规范

    b)DOM树

    c)节点

    文档节点:整个文档

    元素节点:每个html标签

    文字节点:标签的文字

    属性节点:标签的属性

    一切都是节点

    4.获取节点(直接获取+访问关系获取)

    a)操作节点,必须先找到要操作的元素

    通过id找html元素

    document.getElementById("demo")

    通过标签名找html元素

    document.getElementsByTagName("div")

    通过类名找html元素

    document.getElementsByClassName(''a'')

    b)DOM访问关系

    DOM的节点不是孤立的,可以通过DOM节点之间的相互关系来访问

    父节点  parentNode

    兄弟节点  nextSibling  nextElementSibling  previousSibling   previousElementSibling

    子节点     firstChild  firstElementChild   lastChild   lastElementChild

    所有子节点   childNodes  children

    c)childNodes与children区别

    childNodes:标准属性,返回子元素集合,包括html节点,属性节点,文字节点

    children:非标准属性,返回子元素集合,只返回html节点。 IE6/7/8还返回注释节点

    d)获得所有兄弟

    function siblings(elm){

      var a =[];

      var p = elm.parentNode.children;

      for(var i=0,pl=p.length;i<pl;i++){

        if(p[i]!=elm)

          a.pust(p[i])

      }

    }

     5.节点操作

    a)创建节点

    createElement()

    var createDiv = document.createElement('div')

    b)插入子节点

    appendChild()  末尾插入

    insertBefore()  特点位置插入

    c)删除节点

    removeChild()

    父节点.removeChild(子节点)

    不知道父节点:node.parentNode.removeChild(node)

    d)复制节点

    cloneNode()

    var newNode=oldNode.cloneNode()

    接受布尔参数 true 深复制 复制节点以及全部子节点

          false 浅复制  只复制节点

    6设置节点属性

    获取节点属性 getAttribute(名称)

    设置                setAttribute(名称,值)

    删除     removeAttribute(名称)

  • 相关阅读:
    大数据学习——三大组件总结
    js获取当前时间的前一天/后一天
    Windows下主机名和IP映射设置
    大数据学习——HDFS的shell
    微服务化架构特征
    Spring cloud consul 相关前提知识
    Kubeadm 安装
    remove docker ce fully on centos7
    Jquery Gritter set position
    Toggle Checkboxes on/off
  • 原文地址:https://www.cnblogs.com/lovely7/p/7494127.html
Copyright © 2011-2022 走看看