javascript之DOM总结
DOM简介
全称Document Object Model,即文档对象模型。DOM描绘了一个层次化的树,允许开发人员添加、删除、修改页面的某一部分。
浏览器在解析HTML页面标记的时候,其实不是按照一行一行读取并解析的,而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树,组建好之后,按照树的结构将页面显示在浏览器的窗口中。
节点层次
HTML网页是可以看做是一个树状的结构,如下:
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树,是由多个节点(Node)组成的,节点的类型有很多种。
节点最多有一个父节点,可以有多个子节点。
HTML DOM 定义了访问和操作HTML文档的标准方法。
document : 代表当前页面的整个文档树。
访问属性
all
forms
images
links
body
获取节点对象案例
document.getElementById("html元素的id")
document.getElementsByTagName("标签名")
document.getElementsByName("html元素的name")
通过节点关系查找节点
从一个节点出发开始查找:
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。(兄节点)
previousSibling 获取当前节点的上一个节点。(弟节点)
示例1:
firstChild属性最普遍的用法是访问某个元素的文本:
var text=x.firstChild.nodeValue; 示例2:
parentNode 属性常被用来改变文档的结构。
假设您希望从文档中删除带有 id 为 "maindiv" 的节点:
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
获取节点对象的信息
每个节点都包含的信息的,这些属性是:
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
nodeType
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素,例<div>..</div>
文本 3 标签元素中的文本
注释 8 表示为注释 nodeName
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document nodeValue
对于文本节点,nodeValue 属性是所包含的文本。
对于属性节点,nodeValue 属性是属性值。
对于注释节点,nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
节点操作
创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中,child之前。
// 参数1:要插入的节点 参数
插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点
创建节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
添加节点到文档树上:
elt.appendChild(e) 添加元素到elt中最后的位置 把元素添加最后一个子节点的后面。
elt.insertBefore(new, child); 添加到elt中,child之前。// 参数1:要插入的节点 参数2:插入目标元素的位置
正则表达式
位置:
^ 开头
$ 结尾
次数:
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个,最多m个
通配符:
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符(除'\n'外)
组合:
[a-z]
[0-9]
等
组:
(正则) 匹配括号中正则表达式对应的结果,并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果,但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具(RegExp类与相关方法)
创建:
// 方式一
var regex = new RegExp("正则表达式", "标志");
// 方式二
var regex = /正则表达式/标志
参数说明:
正则表达式:
参见上面的规则
标志:
g (全文查找出现的所有 pattern)
i (忽略大小写)
m (多行查找)
方法:
Regexp.test( str )
String.replace( regex, str )
javascript之DOM总结的更多相关文章
- javascript --- javascript与DOM
javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...
- JavaScript与DOM
文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...
- Javascript中DOM技术的的简单学习
第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...
- JavaScript与DOM的关系
JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript学习笔记(2)——JavaScript和DOM的关系
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...
- JavaScript HTML DOM 事件
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...
- JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...
随机推荐
- dhcpd.conf配置文件几例
例1 ddns-update-style interim; ignore client-updates; subnet 192.168.222.0 netmask 255.255.255.0 { ...
- Linux内核网络报文简单流程
转:http://blog.csdn.net/adamska0104/article/details/45397177 Linux内核网络报文简单流程2014-08-12 10:05:09 分类: L ...
- GPS坐标转大地坐标
根据网上EXCEL表格给出的关系,生成的C语言代码.计算结果和软件[万能坐标转换980]计算出的结果很接近. double B = 39.3926; double L = 117.4514; //do ...
- 【网络协议】ARP地址解析协议
地址解析协议ARP 在以太网协议中规定,同一局域网中的一台主机要和另一台主机进行直接通信,必须要知道目标主机的MAC地址.而在TCP/IP协议中,网络层和传输层只关心目标主机的IP地址.这就导致在以太 ...
- Beta冲刺——星期三
这个作业属于哪个课程 <课程的链接> 这个作业要求在哪里 <作业要求的链接> 团队名称 飞猪们 这个作业的目标 剩余任务预估,分配任务(开发,测试等).按要求提交当天冲刺报告. ...
- WPF界面开发:DevExpress WPF在GridControl中固定行时处理时刻
DevExpress广泛应用于ECM企业内容管理. 成本管控.进程监督.生产调度,在企业/政务信息化管理中占据一席重要之地.通过DevExpress WPF Controls,您能创建有着强大互动功能 ...
- 小程序swiper组件的bindchange方法重复执行问题
这是官方文档的说法给出了swiper组件一直来回滑动的bug原因 以下是修正方法 <swiper autoplay="{{autoplay}}" interval=" ...
- 服务消费(LoadBalancerClient、Ribbon、Feign)
转自:https://www.jianshu.com/p/562045489d9d 4.1使用LoadBalancerClient 在Spring Cloud Commons中提供了大量的与服务治理相 ...
- Linux 常用命令备忘
安装wget 方便联网下载: centos : sudo yum -y install wget 安装vim : yum -y install vim* set nu ...
- 【Wince-自定义控件】ImageButton 带图片、文字
1.看图 可以实现MouseDown改变背景颜色或背景图片. 遗憾是没有实现键盘触发按钮事件. 2.选择继承自Control基类 public class ImageButton : Control ...