摘要：派生类包含基类的所有成员，还包括自身的特有成员，由于继承关系的存在，派生类和派生类对象访问基类中的成员就像访问自己的成员一样。可以直接使用，但是派生类，仍旧无法访问基类中的私有成员。
通过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 // 的子元素中的第一个元素 // 选择器组合选择多个或者组合元素 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该节点的类型
一些类 继承（基类，父类，超类），派生类，子类Element
这里以c++为栗子 ：基类，父类，超类，指被继承的类，派生类，子类指继承于基类的类，在C++中冒号表示继承，入classA：public：B 表示派生类A从基类B继承而来。派生类包含基类的所有成员，还包括自身的特有成员，由于继承关系的存在，派生类和派生类对象访问基类中的成员就像访问自己的成员一样。可以直接使用，但是派生类，仍旧无法访问基类中的私有成员。C++派生类可以同时从多个基类继承，java不允许多重继承，当继承多个基类的时候，使用，运算符将基类进行分开。
Element是一个通用的基类，所有的Document都继承自Element
例如
属于一个由Element基类继承的Document的一个节点
text节点文字内容，即匿名文字所成的节点。
Comment节点属于注释的节点
Document 节点一个已经加载好的网页，并通过入口来操作网页的内容
DocumentType节点一个声明节点
DocumentFragment 节点表示一个没有父级文件的最小文档对象。它被当做一个轻量版的 Document 使用
nodeValuetext节点或者Comment节点文本内容
nodeName元素的标签名，以大写输出
一个栗子
控制台输入
document.childNodes[1].childNodes[2].childNode[0]
返回
#text
表示
之前的导致换行符
该html
hello word
继续重新加载，重新输入
document.childNodes[1].childNodes[1] #text
继续去掉唯一的换行符
hello word
继续在控制台输入
document.childNodes[1].childNodes[1] …
返回body
说明是换行符的问题导致
https://stackoverflow.com/que...
https://stackoverflow.com/que...
将文档看成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://www.ucloud.cn/yun/96622.html
摘要：表示的是满足第一个选择器的前提下，从它匹配到的元素后，去寻找位于同一层级，且在该元素后面的所有满足第二个选择器的元素。 本篇文章已授权微信公众号 dasu_Android（大苏）独家发布 声明 本系列文章内容全部梳理自以下四个来源： 《HTML5权威指南》 《JavaScript权威指南》 MDN web docs Github:smyhvae/web 作为一个前端小白，入门跟着这四个...
摘要：希望在做所有事情之前，操作文档。不受层级限制子选择器在给定的父元素下匹配所有子元素。相邻选择器匹配所有紧接在元素后的元素。判断当前对象中的某个元素是否包含指定类名，包含返回，不包含返回下标过滤器精确选出指定下标元素获取第个元素。 原文链接 http://blog.poetries.top/2016... 首先，来了解一下jQuery学习的整体思路 showImg(https://seg...
摘要：渲染引擎的概述渲染引擎的主要职责是在浏览器屏幕上显示请求的页面。中，渲染树中的每个节点都被称为的渲染器或渲染对象。坐标系相对于根渲染器。增量只有一些渲染器以不影响整个树的方式进行更改。渲染器使其矩形在屏幕上无效。 到目前为止，在我们之前的JavaScript工作原理系列文章中，我们一直关注JavaScript作为一种语言，其功能，它如何在浏览器中执行，如何优化等等。 但是，当您构建We...
摘要：由一道面试题引发的思考从用户输入浏览器输入到页面最后呈现有哪些过程一道很常规的题目，考的是基本网络原理，和浏览器加载，过程。所以抽出时间研究下浏览器渲染页面的过程。 由一道面试题引发的思考： 从用户输入浏览器输入url到页面最后呈现 有哪些过程？一道很常规的题目，考的是基本网络原理，和浏览器加载css，js过程。 答案大致如下： 用户输入URL地址 浏览器解析URL解析出主机名 浏览...
摘要：渲染树的布局创建渲染器并将其添加到树中时，它没有位置和大小，计算这些值称为布局。根渲染器的位置为，其尺寸与浏览器窗口的可见部分即的大小相同。渲染器使其在屏幕上的矩形无效，这会导致操作系统将其视为需要重新绘制并生成绘事件的区域。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第11篇。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 如果你错过了前...
阅读 1128·2021-10-08 10:04
阅读 1689·2021-09-04 16:40
阅读 2418·2019-08-30 13:21
阅读 2165·2019-08-29 15:10
阅读 2731·2019-08-29 12:35
阅读 1082·2019-08-26 17:41
阅读 2972·2019-08-26 17:03
阅读 996·2019-08-26 12:01
