文档对象模型-DOM(一)
首先看一下DOM树结构:
每个节点都是一个对象,拥有方法和属性。
脚本可以访问以及更新DOM树(不是源代码)。
针对DOM树的修改都会反映到浏览器。
访问并更新DOM树需要两个步骤:
一、定位到与需要操作的元素所对应的节点
访问元素的相关方法和属性
1.选择单个元素节点方法
(1) getElementById() //使用元素的id属性(在页面中应是唯一)
(2) querySelector() //使用css选择器,返回第一个匹配的元素
(3) 通过使用在DOM树中从第一个元素遍历到另一个元素的方式来选择单独的元素
2.选择多个元素(当一个DOM方法可以返回多个元素时,会返回一个NodeList)
(1) getElementsByClass() //选择所有在class属性中使用了特定值得元素
(2) getElementsByTagName() //选择所有使用了指定标记的元素
(3) 使用css选择器来选择所有匹配的元素
3.在元素节点之间遍历
(1) parentNode //选择当前元素节点的父节点(只返回一个元素)
(2) previousSibling/nextSibling //选择DOM树中的前一个/后一个兄弟节点
(3) firstChild/lastChild //返回当前元素的第一个/最后一个子节点
二、使用它的文本内容、子元素或属性。
1.访问/更新文本节点
使用文本节点的唯一属性 nodeValue 从元素中获取文本
2.操作HTML内容
innerHTML:可以访问子元素和文本内容
textContent:仅能访问文本内容
createElement(): 创建新节点
createTextNode():创建文本节点
appendChlid():添加子节点
removeChlid():移除子节点
3.访问或更新属性值
ClassName/id:使用它们获取或更新class和id的值
hasAttribute():用来检查属性是否存在
getAttribute():用来获取属性值
setAttribute():用来更新属性值
removeAttribute():用来移除属性
文档对象模型-DOM(一)的更多相关文章
- (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM
文档对象模型 DOM DOM 是 JavaScript 操作网页的接口, 全称为“文档对象模型”(Document Object Model). 作用是将网页转为一个 JavaScript 对象,从而 ...
- 文档对象模型 DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- JavaScript文档对象模型(DOM)——DOM核心操作
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口. W3C已经定义了一系列DOM接口,通过这些DOM接口可 ...
- 文档对象模型-DOM(二)
从NodeList中选择元素 方法一:item()方法,用于返回其中的单一节点,需要在方法的参数中指定所需元素的索引编号. 当其中没有任何元素时,执行代码是对资源的浪费.因此程序员会在执行代码之前,先 ...
- DOM(文档对象模型)
1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个 ...
- 文档对象模型(DOM)中的结点属性
在文档对象模型中,每个结点都是一个对象.DOM结点有三个重要的属性:nodeName .nodeValue和nodeType,分别表示结点名称.结点的值和结点的类型 一.nodeName,结点名称,只 ...
- 文档对象模型(DOM)
文档对象模型(DOM) DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构.节点分为几种不同的类型:文档型节点.元素节点.特性节点.注释节点等共有12种节点类型.DOM1级定义了 ...
- HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过可编程的对象模型,JavaScrip ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
随机推荐
- [ 总结 ] nginx 安装过程
本次安装使用源码编译安装: 在安装nginx之前需要先安装三个源码包:pcre.zilb.openssl pcre:用于rewrite重写 zlib: 用于gzip压缩 openss ...
- 【 Nginx 】proxy_cache 模块的使用记录
部署环境:nginx + tomcat 同一台服务器. 通过nginx反向代理tomcat. 配置如下: user www www; worker_processes auto; error_log ...
- 【python】抄写爬淘宝已买到的宝贝的代码
教程地址:http://cuiqingcai.com/1076.html 这一篇掌握的不好.虽然代码可以跑,但是里面的很多东西都一知半解.需要有空的时候系统整理. 原代码中的正则表达式已经失效了,我自 ...
- Python 进阶 之 yield
.转载自:https://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ Python yield 使用浅析: 您可能听说过, ...
- (九)expect批量公钥推送
(1)expect实现ssh非交互登录 注意:注释不能出现这脚本里面 spawn表示开启一个会话 \r:表示回车,exp_continue :表示没有出现这样,继续往下执行 interact :停留在 ...
- [centos6.5] 把xampp的htdocs改为其他目录
vim /opt/lampp/etc/httpd.conf DocumentRoot "/opt/lampp/htdocs" 改为 DocumentRoot "/var/ ...
- ubantu的python2与python3的相关兼容更新问题
Ubuntu14.04, 系统内同时装了Python3.3 和 2.7用sudo apt-get install python-pipsudo apt-get install python3-pip分 ...
- Python3 list记录
#!/usr/bin/env python3 # -*- coding: utf-8 -*- # Author;Tsukasa name = ['YangJiaHui','LiuYueEr','TaB ...
- 博弈论与SG函数
巴什博奕: 两个顶尖聪明的人在玩游戏,有n个石子,每人可以随便拿1−m个石子,不能拿的人为败者,问谁会胜利 结论: 设当前的石子数为\(n=k∗(m+1)\)即\(n%(m+1)==0\)时先手一定失 ...
- 【记忆化搜索】bzoj1055 [HAOI2008]玩具取名
f(l,r,c)表示sl...sr能否被合成字符c. #include<cstdio> #include<cstring> using namespace std; int m ...