通过css类/选择器选取元素 文档结构和遍历 元素树的文档
通过css类选取元素
html所有的元素拥有class属性,该属性会对元素进行分组,标识为某一组。 js中使用className属性来保存HTML的class的属性值
var NodeList = document.getElementById("first")
close.log(NodeList.class)
复制代码
尽管如此,js还定义了一个方法,即一个getElementsByClassName(),是基于class属性值中的标识符来选取成组的文档元素 还有一个类似的getElementsByTagName()的方法也是获取一个组,返回的是一组的内容即NodeList。返回的是类数组。 一个使用getElementsByClassName()的例子
// 查找其class属性值中包含warning的所有元素
var warnings = document.getElementsByClassName("warning");
// 查找以log命名并且含有error和fatal类的元素的所有后代
var log = document.getElementById("log");
var fatal = log.getElementByClassName("fatal error"); // 先获取id为log,在获取class为fatal error的元素
复制代码
一个兼容,浏览器根据!doctype来进行选择怪异模式,和标准模式的,怪异模式是为了向后兼容而存在的,标准模式不是(兼容以及不太重要了,但是还要知道一点,这是ie8的问题,但愿再过几年直接win7也没有了)
通过css选择器选择元素
css样式表可以进行选择,这里仅仅是一些常见的css选择器
#nav // id = nav 的元素
div // 选择div元素
.warning // 选择class属性为waring的元素// 基于属性值选取元素
p[lang="fr"] // 所有语言为fr的元素
*[name="x"] // 所有包含name="x"的属性的元素// 将选择器进行组合使用
span.fatal.error // 选择class中包含fatal和error的span元素
span[lang="fr"].warning // 所有使用法语,并且class中包含warning的span元素// 选择器指定文档结构
#log span // id 为log元素的后代元素中的所有的span元素
#log > span // id 为log元素的子元素中所有的span元素
body>h1:first-child // <body>的子元素中的第一个<h1>元素// 选择器组合选择多个或者组合元素
div, #log // 所有的div元素,以及id为log的元素属于和关系// 正则选择器
a[src^="https"] // 选择src属性为https开头的
a[src$=".pdf"] // 匹配src属性为.pdf结尾的元素
a[src*="ming"] // 匹配src中包含ming的元素
复制代码
h5定义了一些选择api用来通过js来选择元素
document.querySelector("title")
复制代码
选择title元素
document.querySelectorAll("title")
复制代码
会返回一个类数组的 节点列表
document.querySelector(":first-line")
复制代码
选择一个伪元素,在css中匹配了节点一部分,而不是实际元素。 其中querySelector只会返回匹配的第一个结果,querySelectorAll将会返回全部结果,返回一个类数组。
document.querySelector(":link")
复制代码
返回一个页面上未访问的连接
document.querySelectorAll(":visited")
复制代码
选择一个已经访问过的,用来获取用户在该页面的一部分的历史记录
document.all[]
已经废弃,不在使用,所以不学习
文档结构和遍历
一旦从文档中选取了一个元素,将会需要查找文档与之在结构上相关的部分,(即,父元素,子元素,兄弟元素)。温带在概念上为节点对象树。浏览器定义了一个api将会对元素对象树进行遍历
作为节点树的文档
Document对象,以及Element对象和文档中表示文本的Text对象都为Node对象,Node对象定义了一下重要的属性。
parentNode
获取该节点的父节点
childNode
只读类型数组对象(NodeList对象),它是该节点的子节点的实时表示
firstChild, lastChild
该节点的子节点中的第一个和最后一个
nextSibling,previousSibling
该节点的兄弟节点中的前一个和下一个
nodeType
该节点的类型
一些类 继承(基类,父类,超类),派生类,子类 这里以c++为栗子 :基类,父类,超类,指被继承的类,派生类,子类指继承于基类的类,在C++中冒号表示继承,入classA:public:B 表示派生类A从基类B继承而来。派生类包含基类的所有成员,还包括自身的特有成员,由于继承关系的存在,派生类和派生类对象访问基类中的成员就像访问自己的成员一样。可以直接使用,但是派生类,仍旧无法访问基类中的私有成员。C++派生类可以同时从多个基类继承,java不允许多重继承,当继承多个基类的时候,使用,运算符将基类进行分开。
Element
Element是一个通用的基类,所有的Document都继承自Element 例如
<p>
复制代码
属于一个由Element基类继承的Document的一个节点
text节点
文字内容,即匿名文字所成的节点。
Comment节点
属于注释的节点
<!-- 这是注释内容 -->
复制代码
Document 节点
一个已经加载好的网页,并通过入口来操作网页的内容
DocumentType节点
一个声明节点
DocumentFragment 节点
表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用
nodeValue
text节点或者Comment节点文本内容
nodeName
元素的标签名,以大写输出
一个栗子
<!DOCTYPE html>
<html>
<head><title></title>
</head>
<body>
hello word
</body>
</html>
复制代码
控制台输入
document.childNodes[1].childNodes[2].childNode[0]
复制代码
返回
#text
复制代码
表示
<body>之前的导致换行符
复制代码
该html
<!DOCTYPE html><html><head><title></title></head>
<body>hello word</body></html>
复制代码
继续重新加载,重新输入
document.childNodes[1].childNodes[1]
#text
复制代码
继续去掉唯一的换行符
<!DOCTYPE html><html><head><title></title></head><body>hello word</body></html>
复制代码
继续在控制台输入
document.childNodes[1].childNodes[1]
<body style>…</body>
复制代码
返回body 说明是换行符的问题导致 https://stackoverflow.com/questions/45614337/what-causes-childnodes-to-return-text-instead-of-div https://stackoverflow.com/questions/21357004/what-are-html-dom-text-elements
作为元素树的文档
将文档看成Element对象树,忽视部分文档,text和comment文档(回车,空格,以及注释节点)
Element的children属性
第一部分是Element(通用基类)的children属性,类似于childNodes属于一个NodeList对象,不同的是children列表只包含Element对象,text和Comment节点没有children属性,任何的Element的parentNode(父节点)都是另一个Element,或者是树根的Document节点
Element的属性
firstElementChild,lastElementChild 类似firstChild和lastChild,只代表子Element nextElementSibling,previousElementSibling 类似的nextSibling和previousSibling 代表兄弟节点 childElementCount 子元素的数量,和children。length的值相等
博客
www.iming.info
转载于:https://juejin.im/post/5b675bf8f265da0f4626d2c2
通过css类/选择器选取元素 文档结构和遍历 元素树的文档相关推荐
- CSS 类选择器详解——CSS 多类选择器
类选择器允许以一种独立于文档元素的方式来指定样式. CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式. 该选择器可以单独使用,也可以与其他元素结合使用. 提示:只有适当地标记文档后, ...
- css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
- css类选择器与id选择器_一点点的类:有效地使用CSS类选择器
css类选择器与id选择器 Classes are one of the most powerful CSS selectors, but they tend to be somewhat misun ...
- CSS类选择器+案例:谷歌LOGO
类选择器+CSS(内嵌式) <!DOCTYPE html> <html><head><meta charset="utf-8">&l ...
- CSS类命名的语义化VS结构化方式
一般而言,CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的"用意",独立于它的"定位"或确切的特性(结构化方式).像left-bar, red-tex ...
- css–sprit_高级CSS –类已用完–通过使用结构化格式标签避免类
css–sprit Nothing makes me cringe more than when I see other programmers use a class declaration for ...
- css类选择器或逻辑,深入理解CSS中选择器的逻辑处理
在过去的很长一段时间中,我们都说 CSS 是不带有任何逻辑的,意思是在 CSS 中没有控制流,也没有某种类似于其他编程语言的方式来组织 CSS.CSS 天生缺乏逻辑性的问题导致了预处理器的出现.然而业 ...
- css类选择器类名覆盖优先级
code <style>.a{background: red;}.b{background: yellow;} </style> <div class="a b ...
- CSS类选择器选择多个类用逗号隔开
一 中间没有逗号隔开 .A.B {text-align: center;color: red; } 含义:同时包含A类和B类的情况下,才引用此格式 注意:如果引用时引用了多个类,类之间产生矛盾,比如颜 ...
最新文章
- 为了面试,从头到尾说一次 Java 垃圾回收
- 特征工程(三)Doc2Vec
- vc操作windows服务(services.msc)
- JavaWeb之Servlet学习-----实现文件动态下载功能 手写servlet 手动构建web程序
- Sql 实现自动添加行数标记
- 4.2 SE38数据对象
- 最新版Spring Cloud Alibaba微服务架构-Openfeign服务调用篇
- 印度将推出太阳能光伏制造政策
- sql两个in并列_SQL窗口函数
- rocketmq教程教程,JDK8 Stream 数据流效率分析
- makefile懒人版(单个文件编译)
- Codeforces Round #264 (Div. 2) 解题报告
- 新开局哦----!!!
- Java---类反射(1)---类反射入门和基础
- swagger 上传文件 参数_如何使用Swagger上传文件
- log4j配置文件位置详解
- DS8880要将双控高端存储架构进行到底
- Vulnhub-Pwned
- linux cpu使用率 理解,深入理解Linux的CPU使用率
- Adaptive AUTOSAR----Adaptive studio