zoukankan      html  css  js  c++  java
  • 前端随心记---------Javascript系列(第九节.DOM)

    DOM document object model


    对象: 属性 .事件 .方法
    节点:
    html : 是dom模型的根节点
    所有的html标签都叫 元素节点 nodeType=1
    所有的标签的属性叫做 属性节点 nodeType=2
    所有的标签内容叫做 文本节点 nodeType=3
    注:: 8表示的注释节点 9表示的根节点
    一切都是节点
    tagName 标签名称
    nodeName 节点名称
    nodeType 节点类型
    nodeValue 节点对象的文本内容,是一个字符串.


    节点关系
    obj.ownerDocument 当该节点的文本对象根节点==document
    parentNode 获取父节点
    nextElementSibling 下一个兄弟节点(元素,ie8不支持)
    nextSibling (低版本游览器使用) 下一个兄弟元素(包含文本,注释,元素节点)
    previousElementSiling 上一个兄弟节点 (元素,ie8不支持)
    previousSibling (低版本浏览器使用) 上一个兄弟节点(包含文本,注释,元素节点)

    firstElementChild 第一个子节点(元素,ie8不支持)
    firstChild 第一个子节点 (包含文本,注释,元素节点)
    lastElementChild 最后一个子节点 (元素,ie8不支持)
    lastChild 最后一个子节点(包含文本,注释,元素节点)
    childNodes 所有的子节点,包括文本节点,返回节点对象集合.(包含文本,注释,元素节点)
    children 所有的不包括文本节点的子节点,返回节点对象集合.(元素节点,ie8 下包含注释)
    attributes 当前元素节点的所有属性节点.

    属性节点操作
    获取当前节点的所有属性节点
    obj.attributes; 可获取,不可设置
    获取属性节点的值
    obj.attribute[index].nodeValue


    获取和设置单个属性节点两种方式:
    属性操作方式:
    obj.属性名 // 获取
    obj.属性名=“属性值” //设置
    注意:obj.class; //非ie为undefined,ie报错
    正确为obj.className
    方法操作:
    obj.getAttribute("属性名");
    obj.setAttribute("属性名","属性值");
    说明:setAttribute在ie7及更早的ie版本该方法设置class和style是无效的,
    删除属性节点:
    removeAttribute("属性名")
    说明:ie6及更早的ie版本该方法不支持。



    自定义行内属性操作
    obj.attributes: //可通过下标方式获取自定义属性名(nodeName),ie7不能获取nodeValue,结果为null。
    obj.自定义行内属性名: //ie低版本浏览器可获取;非ie是undefined
    obj.getAttribute("自定义属性名"); //都可获取。
    obj.setAttribute ("自定义属性名","属性值"); // 都可设置
    removeAttribute("自定义属性名"); // 可删除。

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    图解 perspective && perspective-origin && transform3d && transform-origin
    【CSS3练习】3D盒子制作
    【CSS3练习】在圆上旋转的菜单
    【CSS3练习】transform 2d变形实例练习
    -webkit-overflow-scrolling : touch 快速滚动 回弹 效果
    【canvas】blackboard 黑板
    【canvas】高级功能一 变形
    【canvas】基础练习三 图片
    【canvas】基础练习二 文字
    【canvas】基础练习一 图形
  • 原文地址:https://www.cnblogs.com/hudunyu/p/11684095.html
Copyright © 2011-2022 走看看