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 ...
随机推荐
- .net的CLR
搜索:CLR结构图 C#所具有的许多特点都是由CLR提供的,如类型安全(Type Checker).垃圾回收(Garbage Collector).异常处理(Exception Manager).向下 ...
- HTTP 返回状态代码详细解释
一:1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 100(继续)请求者应当继续提出请求. 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分:101(切换协议)请求者已要 ...
- PHP面向对象单例模式(懒汉式)
知识点: 一.三私一公: ①.私有静态属性,又来储存生成的唯一对象 ②.私有构造函数 ③.私有克隆函数,防止克隆——clone ④.公共静态方法,用来访问静态属性储存的对象,如果没有对象,则生成此单例 ...
- KNN算法在保险业精准营销中的应用
版权所有,可以转载,禁止修改.转载请注明作者以及原文链接. 一.KNN算法概述 KNN是Machine Learning领域一个简单又实用的算法,与之前讨论过的算法主要存在两点不同: 它是一种非参方法 ...
- 2017 多校3 hdu 6061 RXD and functions
2017 多校3 hdu 6061 RXD and functions(FFT) 题意: 给一个函数\(f(x)=\sum_{i=0}^{n}c_i \cdot x^{i}\) 求\(g(x) = f ...
- [解决方案]NuGet打包报错: 'X' already has a dependency defined for 'Y'
大家在打包Nuget包的时候,最后会执行以下语句 nuget pack .\ML.Common.SDK.csproj -Prop Configuration=Release 执行此句后,提示以下报错信 ...
- 转:Android ListView 异步加载图片
http://www.iteye.com/topic/1118828 http://www.iteye.com/topic/1127914 这样做无疑是非常可取的方法,但是加载图片时仍然会感觉到轻微的 ...
- 强引用(StrongReference)、弱引用(WeakReference)、软引用(SoftReference)、虚引用(PhantomReference)
1.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.如下: Object o=new Object(); // 强引用 当内存空间 ...
- [bzoj4513][SDOI2016]储能表——数位dp
题目大意 求 \[\sum_{i = 0}^{n-1}\sum_{j=0}^{m-1} max((i\ xor\ j)\ -\ k,\ 0)\ mod\ p\] 题解 首先,开始并没有看出来这是数位d ...
- OpenGL 之 坐标变换
http://www.cnblogs.com/irvinow/archive/2009/11/20/1606496.html 创建OpenGL模型过程: OPENGL坐标变换很有特点,为了简单描述先定 ...