通过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

目录
相关文章
|
1月前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
306 60
|
1月前
|
数据采集 前端开发 JavaScript
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
本文介绍了如何使用 Puppeteer 结合 CSS 选择器抓取动态网页中的关键元素,以亚航网站的特价机票信息为例,通过设置代理 IP、User-Agent 和 Cookie 等技术手段,有效提升爬虫策略,实现高效、稳定的爬取。
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
|
1月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
60 7
|
1月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
61 7
|
1月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
45 5
|
1月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
51 2
|
2月前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
28 0
|
2月前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
228 0
|
2月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
26 0
|
7月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
53 1

热门文章

最新文章