zoukankan      html  css  js  c++  java
  • 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API。
    DOM节点树:在文档中出现的空格、回车、标签、注释、文本、doctype、标签等都属于DOM节点。

    操作DOM节点的方式无非就是:创建、添加(插入)、移除、替换、查找(获取)、克隆DOM节点。

    创建文本节点:var newText = document.createTextNode('文本节点');
    创建标签节点:var newNode = document.createElement('div');

    添加(插入)子节点至末尾:父节点.appendChild(子节点);
    添加(插入)子节点至某节点前:父节点.insertBefore(子节点, 某节点);

    移除子节点:父节点.removeChild(子节点);

    替换节点:父节点.replaceChild(替换后的节点, 替换前的节点);

    查找(获取)节点:
    查找(获取)所有子节点:父节点.childNodes
    查找(获取)所有是标签类型的子节点:父节点.children
    查找(获取)下一个兄弟节点:某节点.nextSibling
    查找(获取)上一个兄弟节点:某节点.previousSibling
    查找(获取)父节点:子节点.parentNode
    查找(获取)第一个子节点:父节点.firstChild
    查找(获取)最后一个子节点:父节点.lastChild

    也可以使用document.get…的方法来获取,详细请看:JS获取标签方法及兼容处理

  • 相关阅读:
    团队作业第五次——Alpha冲刺
    Alpha冲刺——总结
    冲刺随笔
    冲刺随笔——Day_Nine
    冲刺随笔——Day_Eight
    冲刺随笔——Day_Seven
    冲刺随笔——Day_Three
    团队作业第五次——Alpha冲刺
    第06组 Alpha冲刺(1/6)
    第06组 团队Git现场编程实战
  • 原文地址:https://www.cnblogs.com/wuyuchang/p/3905283.html
Copyright © 2011-2022 走看看