DOM 操作

访问与树关系（节点）

  1. 绘制 DOM 树: childNodes, attributes
  2. 从一个中心元素访问其所有的直系亲属元素
    • 访问父节点: parentNode
    • 访问上一个兄弟节点: previousSibling
    • 访问下一个兄弟节点: nextSibling
    • 访问第一个属性节点: attributes[ 1 ]
    • 访问第一个子节点：fristChild 或 childNodes[ 0 ]
    • 访问最后一个子节点: lastChild 或 childNodes[ childNodes.length - 1 ]

方法与功能

核心内容就是利用 增删改查

查询

就是获取元素
  1. 标准 DOM API

    • doucment.getElementById
    • document.getElementsByTagName
    • document.getElementsByName
    • document.getElementsByClassName
    • document.querySelectorAll
  2. 亲属访问
  3. 属性获取
    • getAttribute
    • getAttributeNode

增加

  1. 创建

    • document.createElement 创建元素节点
    • document.createTextNode 创建文本节点
    • document.createAttribute 属性节点
    • innerHTML
    • innerText
    • cloneNode()
  2. 加入
    • appendChild 追加到结尾
    • innerHTML
    • insertBefore 用法？将某元素插入到每一个元素的前面 
      父元素.insertBefore( 新元素, 旧元素 );
      
// 将 新元素 插入到 旧元素 的前面
  3. 其他
    • style的操作
    • setAttribute(属性名,属性值)

删除

  1. 输出元素

    • removeChild
    • removeAttributeNode

修改

  1. 修改节点

    • 删除节点再加入
  2. 修改样式
    • style.XXX = VVV
    • setAttribute
  3. 修改文本
    • innerHTML
    • innerText
    • 节点操作
    • nodeValue
  4. 修改属性
    • .xxx = vvv
    • setAttribute

DOM树操作的更多相关文章

  1. JavaScript基础 -- 常见DOM树操作

    1.创建并增加元素节点 <ul id="ul"> <li>1</li> <li>2</li> <li>3&l ...

  2. DOM树的增查改删总结

    DOM树的增查改删总结 摘要:对HTML DOM的操作是前端JavaScript编程时必备的技能,本文是我自己对DOM树操作的总结,主要是方法的罗列,原理性的讲述较少,适合大家用于理清思路或是温习 一 ...

  3. JavaScript——DOM树的增查改删总结

    对HTML DOM的操作是前端JavaScript编程时必备的技能,本文是我自己对DOM树操作的总结,主要是方法的罗列,原理性的讲述较少,适合大家用于理清思路或是温习 一.什么是HTML DOM? 是 ...

  4. jQuery操作列表数据转成Json再输出为html dom树

    jQuery 把列表数据转成Json再输出为如下 dom树 <div id="menu" class="lv1"> <ul class=&qu ...

  5. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  6. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  7. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  8. 【VB6】使用VB6创建和访问Dom树【爬虫基础知识 】

    使用VB6创建和访问Dom树 关键字:VB,DOM,HTML,爬虫,IHTMLDocument 我们知道,在VB中一般大家会用WebBrowser来获取和操作dom对象. 但是,有这样一种情形,却让我 ...

  9. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

随机推荐

  1. trunk 的坑

    三层交换机A和三层交换机B之间原本配置有trunk口,如再用trunk连二层交换机会导致环路,网络不通.将L3 A和L3-B之间断开正常.

  2. Issue 5：Hadoop博客系列转载

    Alex 的 Hadoop 菜鸟教程: 第1课 hadoop体系介绍 Alex 的 Hadoop 菜鸟教程: 第2课 hadoop 安装教程 (CentOS6 CDH分支 yum方式) Alex 的 ...

  3. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  4. 深入理解javascript原型和闭包（1）---一切都是对象

    深入理解javascript原型和闭包(1)---一切都是对象 type函数输出的类型,在此列出: function show (x){ console.log(typeof(x));//undefi ...

  5. 基于spring的aop实现读写分离与事务配置

    项目开发中经常会遇到读写分离等多数据源配置的需求,在Java项目中可以通过Spring AOP来实现多数据源的切换. 一.Spring事务开启流程 Spring中通常通过@Transactional来 ...

  6. Linux环境安装Eclipse及配置hadoop插件

    摘要:第一次使用hadoop,另外eclipse也不太熟悉,所以把自己在安装过程中得琐碎记录下来.以备以后查看. 硬软件环境: ▪ 虚拟机: VMware Workstation 11.0.0 bui ...

  7. filter过滤器怎么写

    package com.wh.filter; import java.io.IOException;import javax.servlet.Filter;import javax.servlet.F ...

  8. FluentData-新型轻量级ORM 利用T4模板 批量生成多文件 实体和业务逻辑 代码

    FluentData,它是一个轻量级框架,关注性能和易用性. 下载地址:FlunenData.Model 利用T4模板,[MultipleOutputHelper.ttinclude]批量生成多文件 ...

  9. 07_编写天气预报和手机归属地的WebService

    <s:element ref="s:schema" /> <s:any /> <s:any minOccurs="2" maxOc ...

  10. 【KeyCode 键码】

    Key codes returned by Event.keyCode. These map directly to a physical key on the keyboard. KeyCode是由 ...