通过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
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Java内存与垃圾回收调优
Java内存与垃圾回收调优 ImportNew-进林 要了解Java垃圾收集机制,先理解JVM内存模式是非常重要的。今天我们将会了解JVM内存的各个部分、如何监控以及垃圾收集调优。 Java(JVM)内存模型 正如你从上面的图片看到的,JVM内存被分成多个独立的部分。广泛地说,JVM堆内存被分为两部分——年轻代(YoungGeneration)和老年代(Old Generation)。 年轻代 年轻代是所有新对象产生的地方。当年轻代内存空间被用完时,就会触发垃圾回收。这个垃圾回收叫做Minor GC。年轻代被分为3个部分——Enden区和两个Survivor区。 年轻代空间的要点: 大多数新建的对象都位于Eden区。 当Eden区被对象填满时,就会执行Minor GC。并把所有存活下来的对象转移到其中一个survivor区。 Minor GC同样会检查存活下来的对象,并把它们转移到另一个survivor区。这样在一段时间内,总会有一个空的survivor区。 经过多次GC周期后,仍然存活下来的对象会被转移到年老代内存空间。通常这是在年轻代有资格提升到年老代前通过设定年龄阈值来完成的。 ...
- 下一篇
一只菜鸡的半年技术博客之路
我写作的初心 做 IT或者程序员工作的我们都知道(其实不只限于IT,我想其他行业也是如此),平时的学习工作过程中,难免会遇到各种问题需要查资料的情形,此时就某一技术问题我们在因特网上会遇到太多太多的信息了!(就像当我们急切需要某一款电子产品,然而翻遍了各大电商,各种测评也找不到一款最满意的产品一样) 我们都看过太多技术博客,要么写法含糊,让人疑点重重;要么按照文章操作后无法复现,跟耍流氓一样;甚至还有一些实在是不知所云,写得完全看不懂,代码混乱,没有配图。每当此时我就会心里暗下决心,如果我是博主,我会把这篇文章写得怎么怎么样…… 另一方面,一直以来自己有一个不知道大家有没有的困惑,那就是遗忘这个东西实在太严重了!学过的东西,实践过的知识,甚至自己曾经轻车熟路的项目,随着时间的流逝,都慢慢的在记忆中模糊了,变淡了,甚至遗忘了。讲实话,我很讨厌这种感觉。在如今95后大牛们都 “大行其道” 的今天,随着自己年龄的增长,我不想让我的所学所感从我手中轻易流逝,我想抓住他,我想将它留在某个地方,我想将它镌刻在某个地方…… 无疑,自己的技术博客是最好的场所 然而重度拖延症的我一直带着这个想法很久也没...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- CentOS关闭SELinux安全模块
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16