html5 dom 结构,HTML5 DOM扩展-优快云博客

一、选择符

1. querySelector()方法：返回与该模式匹配的第一个元素

//取得body元素

var body = document.querySelector("body");

//获取的ID为"one"的元素

var one = document.querySelector("#one");

//获取的Class为"two"的第一个元素。注意：并不是所有元素

var two = document.querySelector(".two");

2. querySelectorAll()方法：返回与该模式匹配的所有元素

//获取的所有"li"的元素

var lis=document.querySelectirAll("li");

//获取的ID为="box"下所有"li"的元素

var lis=document.querySelectir("#box").querySelectirAll("li");

//获取的img标签Class为"show"的所有元素

var lis=document.querySelectirAll("img.show");

3. matchesSelector()方法：调用元素是否与选择符匹配

if(document.body.matchesSelector('body.app'){

//ture

}

二、元素遍历

1.childElementCount:返回子元素的个数(不包括文本节点和注释)

2.firstElementChild:指向第一个子元素

3.lastElementChild:指向最后子元素

4.previousElementSibling:指向前一个同辈元素

5.nextElementSibling:指向下一个同辈元素

6.classList属性：可以对类名进行添加、删除、替换等操作

//删除"hide"类

div.classList.remove("hide");

//添加"show"类

div.classList.add("show");

//切换"high"类

div.classList.toggle("high");

更多属性请自行查看相关资料...

html5——DOM扩展

元素获取 1.document.getElementsByClassName ('class') 通过类名获取元素,以类数组形式存在. 2.document.querySelector(‘div’) ...

DOM扩展札记

Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

HTML5部分新标签属性及DOM扩展元素

HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

HTML5学习笔记(二十四)：DOM扩展

DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

DOM扩展-Selectors API(选择符 API)、元素遍历

DOM扩展对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5 SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,Sele ...

dom扩展

第十一章 DOM扩展一.选择符API 1.querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

11&period; javacript高级程序设计-DOM扩展

1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

js-DOM，DOM扩展

DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

《JAVASCRIPT高级程序设计》DOM扩展

虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

随机推荐

Javascript高性能编程-提高javascript加载速度

1.将所有

idlcpp 功能改进

最近没有续写 idlcpp 的教程, 因为忙着对它进行大幅度的修改. 一开始本是计划用idlcpp对付新写的代码,让这些新写的代码能够很容易提供给脚本使用.后来又希望能将大量现存的代码移植过来,毕竟有 ...

BZOJ 1001 题解

1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 18876 Solved: 4649[Submit][ ...

sublime3笔记

选择类Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数名 ...

【LEETCODE OJ】Clone Graph

Problem link: http://oj.leetcode.com/problems/clone-graph/ This problem is very similar to "Cop ...

C&num; 解决DrawImage绘制图片拉伸产生渐变

ImageAttributes ImgAtt = new ImageAttributes(); ; ImgAtt.SetWrapMode(System.Drawing. ...

第十二章作业 MemoryBugs-master项目优化笔记

作业要求: 下载bug项目:https://github.com/lzyzsd/MemoryBugs,请注意配合使用MemoryMonitor, AllocationTracker以及HeapDump ...

linux在下面APK反编译软件和过程的描述

需要的工具: 1.apktool apk打包工具下载地址:http://android-apktool.googlecode.com/files/apktool1.5.2.tar.bz2 安装:直接 ...

cronolog 对 tomcat 7 进行日志切割

一.安装软件 cronolog-1.6.2.tar.gz tar zxvf cronolog-1.6.2.tar.gz cd cronolog-1.6.2 ./configure &&amp ...