zoukankan      html  css  js  c++  java
  • dom 兼容性问题1_节点部分

    AS : ECMAScript 
    
    xml 、 html 
    
    js组成: 
    
    1,ECMAScript : 是Javascript的核心标准、同时也是一个解释器。 
    
    2,DOM: document object model 文档对象模型 
    
    html dom / xml dom 
    
    document.getElementById(); 
    
    document.getElementsByTagName(); 
    
    oDiv.getElementsTagName(); 
    
    oDiv.style.width 
    
    oDiv.innerHTML 
    
    getComputedStyle() / obj.currentStyle 
    
    dom 是关于如何创建、添加、修改或者删除页面元素的标准。 
    
    所以与页面相关的操作都属于 dom 操作。 
    
    3,BOM : browser object model 浏览器对象模型 
    
    到目前还没有一个实质性的标准规范。

    dom节点是dom中最基本的组成单元。

    层级方式划分 : 父节点 、 子节点 、 兄弟节点

    类型方式划分 :元素节点、属性节点、文本节点、注释节点、document节点

    层级方式划分 : 父节点 、 子节点 、 兄弟节点

    父子节点是上下两层节点之间的关系。

    当前节点上面的所有节点都统称为 祖先节点。

    当前节点下面的所有节点都统称为 子孙节点。

    childNodes : 子节点。 有兼容问题 标准属性

    标准浏览器下:会把代码中的换行符解析成空白文本节点。

    children : 子节点 非标准属性

    不会把换行符解析成空白文本节点

    查看变量类型 : typeof 运算符

    类型方式划分 :元素节点、属性节点、文本节点、注释节点、document节点

    查看节点类型: nodeType 属性

    查看节点名称 : nodeName 属性

    查看节点的值: nodeValue 属性

    nodeType : 1 2 3 8 9

    1 元素节点

    2 属性节点

    3 文本节点

    8 注释节点

    9 document节点

    温馨提示:标签嵌套应该遵循规则。

    ----------------------------------------------------------------------------------------

    firstChild : 第一个子节点 在标准和ie9下会获取到空白文本节点。

    firstElementChild : 标准下获取第一个子元素节点,ie6/7/8不支持。

    lastChild : 最后一个子节点 在标准和ie9下会获取到空白文本节点。

    lastElementChild : 标准下获取最后一个子元素节点,ie6/7/8不支持。

    nextSibling:下一个兄弟节点 在标准和ie9下会获取到空白文本节点。

    nextElementSibling:标准下获取下一个兄弟节点,ie6/7/8不支持。

    previousSibling:上一个兄弟节点 在标准和ie9下会获取到空白文本节点。

    previousElementSibling:标准下获取上一个兄弟节点,ie6/7/8不支持。

    1. parentNode : 当前节点的上一层节点(父节点)。

    ---------------------------------------------------------------------------------------

    封装函数

    function getPrev( obj ){

    if( !obj || !obj.previousSibling ) return null;

    //先处理参数为假或者兄弟节点不存在的情况。

    return obj.previousSibling.nodeType === 1 ? obj.previousSibling : getPrev( obj.previousSibling );

    }

    function getNext( obj ){

    if( !obj || !obj.nextSibling ) return null;

    //先处理参数为假或者兄弟节点不存在的情况。

    return obj.nextSibling.nodeType === 1 ? obj.nextSibling : getNext( obj.nextSibling );

    }

    function getFirst( obj ){

    if( !obj || !obj.firstChild ) return null;

    return obj.firstChild.nodeType === 1 ? obj.firstChild : getNext( obj.firstChild );

    }

    function getLast( obj ){

    if( !obj || !obj.lastChild ) return null;

    return obj.lastChild.nodeType === 1 ? obj.lastChild : getPrev( obj.lastChild );

    }

  • 相关阅读:
    LeetCode Subsets II
    LeetCode Rotate Image
    LeetCode Palidrome Number
    LeetCode Generate Parentheses
    LeetCode Maximum Subarray
    LeetCode Set Matrix Zeroes
    LeetCode Remove Nth Node From End of List
    Linux Loop设备 使用
    Linux 文件系统大小调整
    LeetCode N-Queens II
  • 原文地址:https://www.cnblogs.com/aix1314/p/4548977.html
Copyright © 2011-2022 走看看