文档对象模型-DOM(二)
从NodeList中选择元素
方法一:item()方法,用于返回其中的单一节点,需要在方法的参数中指定所需元素的索引编号。
当其中没有任何元素时,执行代码是对资源的浪费。因此程序员会在执行代码之前,先检查一下在NodeList中是否至少包含一个节点。
可以使用length方法来实现。举例如下:
var elements = document.getElementsByClassName('hot');
if(elements.length>=0){
var firstItem = elements.item(0);
}
方法二:数组语法,可以使用括号语法来访问其中一个元素,就像访问数组中的单一项一样,需要在NodeList后面的中括号里指定所需的索引编号。举例如下:‘
var elements = document.getElementsByClassName('hot');
if(elements.length>=0){
var firstItem = elements[0];
}
使用class属性选择元素
var elements = document.getElementsByClassName('hot'); // 找到class值为'hot'的所有元素
if (elements.length > 2) {
var el = elements[2]; // 选择第三个元素并缓存到el
el.className = 'cool'; // 将第三个元素的值替换为'cool'
5 }
使用标签名选择元素
getElementsByTagName()方法
var elements = document.getElementsByTagName('li'); // 找到<li>标签的多有元素
if (elements.length > 0) {
var el = elements[0];
el.className = 'cool';
}
使用class选择器选择元素
querySelector() //返回第一个匹配的元素;querySelectorAll() //返回匹配的所有元素
var el = document.querySelector('li.hot');
el.className = 'cool';
var els = document.querySelectorAll('li.hot');
els[1].className = 'cool';
循环遍历NodeList
var hotItem = document.querySelectorAll('li.hot');
for(var i=0;i<hotItems.length;i++){
hotItems[i].className='cool';
}
对前后兄弟节点的操作
html代码:
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
js代码:
// Select the starting point and find its siblings.
var startItem = document.getElementById('two');
var prevItem = startItem.previousSibling;
var nextItem = startItem.nextSibling;
// Change the values of the siblings' class attributes.
prevItem.className = 'complete';
nextItem.className = 'cool';
对子节点操作
html代码同上
js代码:
// Select the starting point and find its children.
var startItem = document.getElementsByTagName('ul')[0];
var firstItem = startItem.firstChild;
var lastItem = startItem.lastChild;
// Change the values of the children's class attributes.
firstItem.className = 'complete';
lastItem.className = 'cool';
文档对象模型-DOM(二)的更多相关文章
- (84)Wangdao.com第十八天_JavaScript 文档对象模型 DOM
文档对象模型 DOM DOM 是 JavaScript 操作网页的接口, 全称为“文档对象模型”(Document Object Model). 作用是将网页转为一个 JavaScript 对象,从而 ...
- JavaScript文档对象模型(DOM)——DOM核心操作
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口. W3C已经定义了一系列DOM接口,通过这些DOM接口可 ...
- 文档对象模型 DOM
1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 文档对象模型 是表示和操作 HTML和XML文档内容的基础API 文档对象模型,是W3C组织推荐的处理可 ...
- 文档对象模型-DOM(一)
首先看一下DOM树结构: 每个节点都是一个对象,拥有方法和属性. 脚本可以访问以及更新DOM树(不是源代码). 针对DOM树的修改都会反映到浏览器. 访问并更新DOM树需要两个步骤: 一.定位到与 ...
- 文档对象模型(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引 ...
- 文档对象模型(DOM),你只需知道这些就够了!
官方定义--应用程序编程接口(API) 文档对象模型是用于HTML和XML文档的应用程序编程接口,它定义文档的逻辑结构,以及访问和操作文档的方式. "The Document Object ...
随机推荐
- 【Android开发日记】之入门篇(十四)——Button控件+自定义Button控件
好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...
- 解决xshell 、SecureCRT中文乱码
一.解决xshell 中文乱码 在xshell命令行里面 输入: locale输出: LANG=zh_CN.UTF-8LC_CTYPE="zh_CN.UTF-8"LC_NUMERI ...
- WPF中使用WPFMediaKit视频截图案例
前台 代码: <Window x:Class="WpfAppWPFMediaKit.MainWindow" xmlns="http://schemas.micros ...
- python的上下文管理(contextlib)(2)
contextlib是一个Python模块,作用是提供更易用的上下文管理器. 编写 __enter__ 和 __exit__ 仍然很繁琐,因此Python的标准库 contextlib 提供了更简单的 ...
- MATLAB求函数零点与极值
1. roots函数 针对多项式求零点(详见MATLAB多项式及多项式拟合) 2. fzero函数 返回一元函数在某个区间内的的零点. x0 = fzero(@(x)x.^2-3* ...
- HBASE启动失败,Failed construction of Master: class org.apache.hadoop.hbase.master.HMaster
Master日志错误:2015-12-02 06:34:32,394 ERROR [main] master.HMasterCommandLine: Master exitingjava.lang.R ...
- HDU 1015 Safecracker【数值型DFS】
Safecracker Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- [BZOJ 1305] 跳舞
Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1305 Solution: 发现res是否可行具有单调性,二分答案 容易看出每次check ...
- [CF418E]Tricky Password
题意:有一个无限行$n$列的数表$a_{i,j}$,对于第$i\geq2$行,$a_{i,j}$为$a_{i-1,j}$在$a_{i-1,1\cdots j}$中出现的次数,要维护这个数表,支持修改第 ...
- Mysql-库的基本操作
一 .系统数据库 二 .创建数据库 三 .数据库相关操作 一. 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信 ...