DOM系统学习-基础
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系统学习-基础的更多相关文章
- DOM系统学习-进阶
DOM类型 Node类型: 常用类型: 元素节点 ELEMENT_NODE 属性节点 ATTRIBUTE_NODE 文本节点 TEX ...
- DOM系统学习-表格、样式和元素大小
操作表格 属性: caption 标题元素 tHead 表头元素 tFoot 表尾元素 tBodies 主体元素集合,通过下标取 row 行元素集合,通过下标取 方法 ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- 零基础如何系统学习Java Web
零基础如何系统学习Java Web? 我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...
- Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇
前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系.前两天又读 ...
- Linux学习之六-Linux系统的基础优化
Linux系统的基础优化 何谓'优化'.顾名思义,优化就是采取某些措施使某个东西或者某事物变得更加优异,出色.对于Linux而言,在初期安装好系统之后,也需要对其进行一定的基础优化,可分为安全上的优化 ...
- 现代3D图形编程学习-基础简介(2) (译)
本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...
- 001 今天开始系统学习C#
2016-01-16 之前只是大概了解过c#语言,感觉掌握不牢靠.现在开始系统学习C#.现以该博客作为学习笔记,方便后续查看.C# 目标:系统掌握c#知识 时间:30天 范围:C#基础,Winform ...
- JavaScript学习基础部分
JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...
随机推荐
- 《大道至简》第一章 编程的精义 java伪代码形式
愚公.这位名家身上,浓缩了项目组织者.团队经理.编程人员.技术分析师等众多角色的优秀素质. 愚公移山事件分析: 原始需求:惩山北之塞,出入之迂 项目沟通方式:聚室而某曰 项目目标:毕力平险,指通豫南, ...
- Linux下性能测量和调试诊断工具Systemtap
一.简介 SystemTap是一个诊断Linux系统性能或功能问题的开源软件.它使得对运行时的Linux系统进行诊断调式变得更容易.更简单.有了它,开发者或调试人员不再需要重编译.安装新内核.重启动等 ...
- HttpWebRequest调用WebService后台需要Session信息问题的解决办法
今天在用HttpWebRequest调用后台ASP.NET 的WebService方法时遇到了一个问题,后台的WebService方法里使用到了Session对象中的用户信息,而Session对象中的 ...
- sql优化(转)
explain +sql分析sql语句执行效率 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用! ...
- 【bzoj2618】[Cqoi2006]凸多边形 半平面交
题目描述 逆时针给出n个凸多边形的顶点坐标,求它们交的面积.例如n=2时,两个凸多边形如下图: 则相交部分的面积为5.233. 输入 第一行有一个整数n,表示凸多边形的个数,以下依次描述各个多边形.第 ...
- ngrepeat 时注意的地方和一些little tricks
angularjs的一些使用经验总结,此篇文章单谈ng指令之一ngrepeat 1. ngrepeat 时报错 Duplicates in a repeater are not allowed, 正常 ...
- 汕头市队赛 SRM 07 A 你的麻将会排序吗
A 你的麻将会排序吗 SRM 07 曾经有过一些沉迷日麻的小孩纸,后来呀,他们都去寻找自己的世界了. kpm也是这样的小孩纸.他想有一只自动整理牌的机器.当麻将以给定的顺序进入机器时,通过机器的运转, ...
- 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 ...
- 洛谷P3144 [USACO16OPEN]关闭农场Closing the Farm
农夫约翰和他的奶牛准备去旅行,所以约翰想要把他的农场临时关闭. 农场有N个牛棚(牛棚从1到N编号),有M条路连接这些牛棚(1≤N,M≤3000). 约翰打算挨个关闭牛棚,在关牛棚的时候, 他突然想起一 ...
- Hibernate中多种方式解除延迟加载
问题引发:因为dao使用load(),默认延迟加载的,当在biz关闭session之后,UI层无法获取对象的非id属性值 解决方案: 1.变成get,即时加载 2.用Hibernate.isIniti ...