一、DOM树
DOM树有两种,分别为节点树和元素树。
节点树:把文档中所有的内容都看成树上的节点;
元素树:仅把文档中的所有标签看成树上的节点。
二、DOM常用操作
2.1 查找节点
document.getElementById(id属性值);
返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName(class属性值);
返回拥有指定class的对象集合
document/element.getElementsByTagName(标签名);
返回拥有指定标签名的对象集合
document.getElementsByName( ame属性值);
返回拥有指定名称的对象结合
document/element.querySelector(CSS选择器);
仅返回第一个匹配的元素
document/element.querySelectorAll(CSS选择器);
返回所有匹配的元素
document.documentElement
获取页面中的HTML标签
document.body
获取页面中的BODY标签
document.all[\]
获取页面中的所有元素节点的对象集合型
2.2 新建节点
document.createElement(元素名);
创建新的元素节点
document.createAttribute(属性名);
创建新的属性节点
document.createTextNode(文本内容);
创建新的文本节点
document.createComment(注释节点);
创建新的注释节点
document.createDocumentFragment( );
创建文档片段节点
2.3 添加新节点
parent.appendChild( element/txt/comment/fragment );
向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );
向父节点的某个特定子节点之前插入新节点
element.setAttributeNode( attributeName );
给元素增加属性节点
element.setAttribute( attributeName, attributeValue );
给元素增加指定属性,并设定属性值
@ 用什么表示子代选择器?
CSS3中的关系选择器主要包括子代选择器和兄弟选择器,其中子代选择器由符号连接,兄弟选择器由符号“+”和“~”连接,具体如下所示。
(1)关系选择器
例如: h1>strong
说明:表示选择嵌套在h1标记的子标记strong。
(2)临近兄弟选择器
例如: h2+p
说明:表示选择h2标记后紧邻的第一个兄弟标记p。
(3)普通兄弟选择器
例如:p~h2
说明:表示选择p标记所有的h2兄弟标记
@ css选择器选取节点的是?
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样大家选择相应的元素就很重要了,如何选择对应的元素,此时就需要大家所说的选择器。在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。@ CSS怎么写?
内嵌样式表
<STYLE type="text/css">
选择符 { 样式属性:取值;样式属性:取值;…}
</STYLE>
外部样式表
写好了样式之后保存为后缀.css的文件
再在你要引用的HTML文件的<HEAD></HEAD>标签内写上引用语句
<LINK rel="stylesheet" href="该文件的名称(包括路径)" type="text/css">
行内样式
在要加入的行的表签内写