• DOM相关


    归纳一下,

    不管是DOM Core还是HTML-DOM,我们在使用JavaScript的时候要注意浏览器之间的兼容性,因为不同的浏览器对这两类方法和属性的支持可能不一样,一般推荐使用DOM Core方法和属性,尽管稍显繁杂。

    常见的Core DOM方法如下:

    1、创建节点

    createElement()

    createTextNode()

    2、复制节点

    cloneNode()

    3、插入节点

    appendChild()

    insertBefore()

    4、删除节点

    removeChild()

    5、替换节点

    replaceChild()

    6、查找和设置节点属性

    setAttribute()

    getAttribute()

    7、查找节点

    getElementById()

    getElementsByTagName()

    hasChildNode()

    常见的Core DOM属性如下:

    node.childNodes

    node.firstChild

    node.lastChild

    node.nextSibling

    node.previousSibling

    node.parentNode

      

    总结/回顾:

     DOM 基本方法

    直接引用方法:

    1、documen.getElementById(id);

    2、document.getElementByTagName(tagName);

    返回一个数组,包含对这些节点的引用

    间接引用节点 

    3、子节点element.childNode

    返回element的所有子节点,通过element.childNodes[i]的方式来调用

    Element.firstChild = element.childNodes[0];

    Element.lastChild = element.childNodes[element.childNodes.length-1];

    4、父节点element.parentNode

    5、下一个兄弟节点element.nextSibling;

    上一个兄弟节点element.previousSibling;

    获得节点信息 

    6、nodeName属性获得节点名称eg:<a></a>返回”a”; class=”test”返回”test”; 文本节点返回文本内容。

    7、nodeType返回节点的类型。元素节点返回1;属性节点返回2;文本节点返回3;

    8、nodeValue返回节点的值。元素节点返回null;属性节点返回undefined;文本节点返回文本内容。

    9、hasChildNodes()返回布尔值,判断是否含有子节点。

    10、tagName属性返回元素的标记名称。等价于nodeName属性

    处理属性节点

    11、用setAttributeNode()方法给元素节点添加属性。

    ElementNode.setAttribute(attributeName,attributeValue); 参数分别为(属性名称,属性值)

    12、用getAttribute()方法获得属性值

    处理文本节点

    13、innerHTML和innerText方法

    改变文档的层次结构

    14、创建元素节点document.createElement()

    15、创建文本节点Document.createTextNode();

    //注: document.createTextNode(" ");他不会通过html编码,也就是说这里创建的不是空格,而是字符串

    16、添加子节点 appendChild()。parentElement.appendChild(childElement);

    17、插入子节点insertBefore()。

    appendChild、insertBefore和insertAfter(自定义函数) 的区别

    18、使用replaceChild方法取代子结点。parentNode.replaceChild(newNode,oldNode); 

    19、使用cloneNode方法复制结点 。node.cloneNode(includeChildren); includeChildren为bool,表示是否复制其子结点 。

    20、使用removeChild方法删除子结点 。parentNode.removeChild(childNode); 

  • 相关阅读:
    反射/元类/项目的生命周期
    面向对象高级
    面向对象之封装/鸭子类型
    面向对象之继承
    面向对象1
    包/logging模块/hashlib模块/openpyxl模块/深浅拷贝
    python 几行代码实现自动回复功能
    python crypto rsa 加密运用
    pytohn 单下划线与双下划线的区别
    python 线程小练习
  • 原文地址:https://www.cnblogs.com/mxxhit/p/4203275.html
Copyright © 2020-2023  润新知