DOM介绍

 DOM介绍:

D 网页文档

O 对象,可以调用属性和方法

M 网页文档的树型结构

 节点:

DOM将树型结构理解为由节点组成。

    节点种类:

元素节点、文本节点、属性节点等

查找元素

 获取元素:

getElementById()

getElementsByTagName()

querySeletor()

 元素节点属性:

tagName

innerHTML

    HTML属性的属性:

id

title

style

className

    属性操作:

getAttribute()

setAttribute()

removeAtrribute()

PS:style和onclick有兼容问题,现在都支持自定义属性

DOM节点

node节点属性:

nodeName 节点名称

nodeType 节点类型

nodeValue 节点值,不解析html

 层次节点属性:

子节点

childNodes 获取某所有子节点,包括元素节点和文本节点

firstChild 获取第一个节点

lastChild 获取最后一个节点

父兄节点

parentNode 获取父节点

previousSibling 获取上一个同级节点

nextSibling 获取下一个同级节点

ownerDocument 根节点 ele.ownerDocument === document

attributes 属性节点的数组集合

    忽略空白节点的方法:

忽略:

1
2
3
4
5
6
7
8
9
10
11
12
function filterSpaceNode(nodes) {
    var ret = []; //新数组   
    for (var i = 0; i < nodes.length; i++) {
        //如果识别到空白文本节点,就不添加数组   
        if (nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)) {
            continue;
        }
        //把每次的元素节点,添加到数组里   
        ret.push(nodes[i]);
    }
    return ret;
}

移除:

1
2
3
4
5
6
7
8
9
function removeWhiteNode(element) {   
      var nodes = element.childNodes;   
      for (var i = 0; i < nodes.length; i++) {   
          if (nodes[i].nodeType === 3 && /^\s+$/.test(nodes[i].nodeValue)) {   
              nodes[i].parentNode.removeChild(nodes[i]);   
          }   
      }   
      return element;   
  }

节点操作

 创建节点:

document.createElement() 创建一个元素节点

document.createTextNode(txt) 创建文本节点

 插入节点:

ele.appendChild(newChild) 将新节点添加到某个节点的子节点末尾

insertBefore(newChild,refChild) 指点节点前面插入新节点

insertAfter() 需要自定义

1
2
3
4
5
6
7
8
9
10
11
function insertAfter(newElement, targetElement) {
    //得到父节点         
    var parent = targetElement.parentNode;
    //如果最后一个子节点是当前元素,那么直接添加即可         
    if (parent.lastChild === targetElement) {
        parent.appendChild(newElement);
    else {
        //否则,在当前节点的下一个节点之前添加         
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

 替换复制移除:

replaceChild(newChild,refChild) 替换节点,必须是某元素的子节点

cloneChild(deep) 克隆节点

removeChild(oldChild) 移除节点

DOM系统学习-基础的更多相关文章

  1. DOM系统学习-进阶

    DOM类型  Node类型: 常用类型: ​    ​    ​元素节点 ELEMENT_NODE ​    ​    ​属性节点 ATTRIBUTE_NODE ​    ​    ​文本节点 TEX ...

  2. DOM系统学习-表格、样式和元素大小

    操作表格  属性: caption    标题元素 tHead    表头元素 tFoot    表尾元素 tBodies    主体元素集合,通过下标取 row    行元素集合,通过下标取  方法 ...

  3. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  4. 零基础如何系统学习Java Web

    零基础如何系统学习Java Web?   我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...

  5. Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇

    前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系.前两天又读 ...

  6. Linux学习之六-Linux系统的基础优化

    Linux系统的基础优化 何谓'优化'.顾名思义,优化就是采取某些措施使某个东西或者某事物变得更加优异,出色.对于Linux而言,在初期安装好系统之后,也需要对其进行一定的基础优化,可分为安全上的优化 ...

  7. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

  8. 001 今天开始系统学习C#

    2016-01-16 之前只是大概了解过c#语言,感觉掌握不牢靠.现在开始系统学习C#.现以该博客作为学习笔记,方便后续查看.C# 目标:系统掌握c#知识 时间:30天 范围:C#基础,Winform ...

  9. JavaScript学习基础部分

    JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...

随机推荐

  1. 《大道至简》第一章 编程的精义 java伪代码形式

    愚公.这位名家身上,浓缩了项目组织者.团队经理.编程人员.技术分析师等众多角色的优秀素质. 愚公移山事件分析: 原始需求:惩山北之塞,出入之迂 项目沟通方式:聚室而某曰 项目目标:毕力平险,指通豫南, ...

  2. Linux下性能测量和调试诊断工具Systemtap

    一.简介 SystemTap是一个诊断Linux系统性能或功能问题的开源软件.它使得对运行时的Linux系统进行诊断调式变得更容易.更简单.有了它,开发者或调试人员不再需要重编译.安装新内核.重启动等 ...

  3. HttpWebRequest调用WebService后台需要Session信息问题的解决办法

    今天在用HttpWebRequest调用后台ASP.NET 的WebService方法时遇到了一个问题,后台的WebService方法里使用到了Session对象中的用户信息,而Session对象中的 ...

  4. sql优化(转)

    explain +sql分析sql语句执行效率 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用! ...

  5. 【bzoj2618】[Cqoi2006]凸多边形 半平面交

    题目描述 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. 输入 第一行有一个整数n,表示凸多边形的个数,以下依次描述各个多边形.第 ...

  6. ngrepeat 时注意的地方和一些little tricks

    angularjs的一些使用经验总结,此篇文章单谈ng指令之一ngrepeat 1. ngrepeat 时报错 Duplicates in a repeater are not allowed, 正常 ...

  7. 汕头市队赛 SRM 07 A 你的麻将会排序吗

    A 你的麻将会排序吗 SRM 07 曾经有过一些沉迷日麻的小孩纸,后来呀,他们都去寻找自己的世界了. kpm也是这样的小孩纸.他想有一只自动整理牌的机器.当麻将以给定的顺序进入机器时,通过机器的运转, ...

  8. codechef AUG17 T2 Chef and Mover

    Chef and Mover Problem Code: CHEFMOVR Chef's dog Snuffles has so many things to play with! This time ...

  9. 洛谷P3144 [USACO16OPEN]关闭农场Closing the Farm

    农夫约翰和他的奶牛准备去旅行,所以约翰想要把他的农场临时关闭. 农场有N个牛棚(牛棚从1到N编号),有M条路连接这些牛棚(1≤N,M≤3000). 约翰打算挨个关闭牛棚,在关牛棚的时候, 他突然想起一 ...

  10. Hibernate中多种方式解除延迟加载

    问题引发:因为dao使用load(),默认延迟加载的,当在biz关闭session之后,UI层无法获取对象的非id属性值 解决方案: 1.变成get,即时加载 2.用Hibernate.isIniti ...