整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML DOM 节点
在 HTML DOM (Document Object Model) 中, 每个东西都是 节点 :
文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点
元素对象
在 HTML DOM 中, 元素对象代表着一个 HTML 元素。
元素对象 的 子节点可以是, 可以是元素节点，文本节点，注释节点。
NodeList 对象 代表了节点列表，类似于 HTML元素的子节点集合。
元素可以有属性。属性属于属性节点（查看下一节）。
浏览器支持
所有主流浏览器都支持 元素对象 和 NodeList 对象。.
属性和方法
以上属性和方法可适用于所有 HTML 元素：
| 属性 / 方法 | 描述 |
|---|---|
| element.accessKey | 设置或返回accesskey一个元素 |
| element.addEventListener() | 向指定元素添加事件句柄 |
| element.appendChild() | 为元素添加一个新的子元素 |
| element.attributes | 返回一个元素的属性数组 |
| element.childNodes | 返回元素的一个子节点的数组 |
| element.classlist | 返回元素的类名，作为 DOMTokenList 对象。 |
| element.className | 设置或返回元素的class属性 |
| element.clientHeight | 在页面上返回内容的可视高度（不包括边框，边距或滚动条） |
| element.clientWidth | 在页面上返回内容的可视宽度（不包括边框，边距或滚动条） |
| element.cloneNode() | 克隆某个元素 |
| element.compareDocumentPosition() | 比较两个元素的文档位置。 |
| element.contentEditable | 设置或返回元素的内容是否可编辑 |
| element.dir | 设置或返回一个元素中的文本方向 |
| element.firstChild | 返回元素的第一个子节点 |
| element.focus() | 设置文档或元素获取焦点 |
| element.getAttribute() | 返回指定元素的属性值 |
| element.getAttributeNode() | 返回指定属性节点 |
| element.getElementsByTagName() | 返回指定标签名的所有子元素集合。 |
| element. getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为 NodeList 对象。 |
| element.getFeature() | 返回指定特征的执行APIs对象。 |
| element.getUserData() | 返回一个元素中关联键值的对象。 |
| element.hasAttribute() | 如果元素中存在指定的属性返回 true，否则返回false。 |
| element.hasAttributes() | 如果元素有任何属性返回true，否则返回false。 |
| element.hasChildNodes() | 返回一个元素是否具有任何子元素 |
| element.hasfocus() | 返回布尔值，检测文档或元素是否获取焦点 |
| element.id | 设置或者返回元素的 id。 |
| element.innerHTML | 设置或者返回元素的内容。 |
| element.insertBefore() | 现有的子元素之前插入一个新的子元素 |
| element.isContentEditable | 如果元素内容可编辑返回 true，否则返回false |
| element.isDefaultNamespace() | 如果指定了namespaceURI 返回 true，否则返回 false。 |
| element.isEqualNode() | 检查两个元素是否相等 |
| element.isSameNode() | 检查两个元素所有有相同节点。 |
| element.isSupported() | 如果在元素中支持指定特征返回 true。 |
| element.lang | 设置或者返回一个元素的语言。 |
| element.lastChild | 返回的最后一个子元素 |
| element.namespaceURI | 返回命名空间的 URI。 |
| element.nextSibling | 返回该元素紧跟的一个元素 |
| element.nodeName | 返回元素的标记名（大写） |
| element.nodeType | 返回元素的节点类型 |
| element.nodeValue | 返回元素的节点值 |
| element.normalize() | 使得此成为一个"normal"的形式，其中只有结构（如元素，注释，处理指令，CDATA节和实体引用）隔开Text节点，即元素（包括属性）下面的所有文本节点，既没有相邻的文本节点也没有空的文本节点 |
| element.offsetHeight | 返回，任何一个元素的高度包括边框和填充，但不是边距 |
| element.offsetWidth | 返回元素的宽度，包括边框和填充，但不是边距 |
| element.offsetLeft | 返回当前元素的相对水平偏移位置的偏移容器 |
| element.offsetParent | 返回元素的偏移容器 |
| element.offsetTop | 返回当前元素的相对垂直偏移位置的偏移容器 |
| element.ownerDocument | 返回元素的根元素（文档对象） |
| element.parentNode | 返回元素的父节点 |
| element.previousSibling | 返回某个元素紧接之前元素 |
| element.querySelector() | 返回匹配指定 CSS 选择器元素的第一个子元素 |
| document.querySelectorAll() | 返回匹配指定 CSS 选择器元素的所有子元素节点列表 |
| element.removeAttribute() | 从元素中删除指定的属性 |
| element.removeAttributeNode() | 删除指定属性节点并返回移除后的节点。 |
| element.removeChild() | 删除一个子元素 |
| element.removeEventListener() | 移除由 addEventListener() 方法添加的事件句柄 |
| element.replaceChild() | 替换一个子元素 |
| element.scrollHeight | 返回整个元素的高度（包括带滚动条的隐蔽的地方） |
| element.scrollLeft | 返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
| element.scrollTop | 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 |
| element.scrollWidth | 返回元素的整个宽度（包括带滚动条的隐蔽的地方） |
| element.setAttribute() | 设置或者改变指定属性并指定值。 |
| element.setAttributeNode() | 设置或者改变指定属性节点。 |
| element.setIdAttribute() | |
| element.setIdAttributeNode() | |
| element.setUserData() | 在元素中为指定键值关联对象。 |
| element.style | 设置或返回元素的样式属性 |
| element.tabIndex | 设置或返回元素的标签顺序。 |
| element.tagName | 作为一个字符串返回某个元素的标记名（大写） |
| element.textContent | 设置或返回一个节点和它的文本内容 |
| element.title | 设置或返回元素的title属性 |
| element.toString() | 一个元素转换成字符串 |
| nodelist.item() | 返回某个元素基于文档树的索引 |
| nodelist.length | 返回节点列表的节点数目。 |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
)CSS 标准盒子模型(Box Model)
在网页中所有HTML元素可以看作盒子,在CSS中,"box model"术语是用来设计和布局时使用的;CSS盒模型本质上是一个盒子,封装周围的HTML元素包括:外边距(margin)边框(border)内边距(padding)实际内容(content)四个属性,所以布局时每个元素所占的总宽高是这4个属性的总和;比如宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
1.1Margin(外边距)清除边框外的区域,外边距是透明的
1.2Border(边框)围绕在内边距和内容外的边框
1.3Padding(内边距)清除内容周围的区域,内边距是透明的
1.4Content(内容)盒子里填充的内容比如文本,图像等
标准盒子模型
宽度为100px的div
根据盒子模型得出该元素的总宽度为:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一个宽度为100px的元素,此元素的总宽度必须小于等于100px
2)DIV+CSS布局
Div+CSS布局就是将网页内容用<div>分割为块,之后使用css设置每个块的大小,位置等
DIV+CSS布局最重要的是灵活运用float(浮动)属性,其值:1)left 2)right 3)both
clear属性作用是清除浮动,其值为:1)left 2)right 3)both
d2向右浮动 float:right
因为div是块级元素,如果都没有脱离文档流div就会按照从上到下的顺序放置
d2设置为右浮动其他两个div位置的变化:
1)d1没有脱离文档流会占据一行,所以d2只能浮动到d1下面的右面如上图所示
2)d2脱离文档流,d3自动填充到d2的位置
d1,d2全部设置为右浮动
1)当d1,d2都设置为右浮动时:因为css中d1在d2上面先设置,因此d1在右侧,如果d2在d1上面先设置样式,则d2在右侧,d1在左侧,自己测试不再截图
2)当d1,d2都设置为右浮动时:d3就会跑到上图中d2的位置
3)如果3个div都设置左或右浮动,当3个width加一起<=100%就会在第一行显示(d1,d2,d3)
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 50%;
height: 100px;
}
</style>d2清除左浮动,d3设置为右浮动
当d2清除了左浮动,d3设置为右浮动,就会如上图所示;如果d2清除的是右浮动,d2就会在d1上面,d3就会定位在d1下面的右面,自己测试不再截图
当d2清除了左浮动,如果想要d2紧挨着d1(与d1在一行上),可以通过position脱离文档流设置其上下左右属性使其定位在d1右侧,自己测试
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div+CSS布局</title>
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 30%;
height: 100px;
float:left;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 40%;
height: 100px;
clear: left;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 30%;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div id="d1"><span style="font-size: 50px;">d1</span></div>
<div id="d2"><span style="font-size: 50px;">d2</span></div>
<div id="d3"><span style="font-size: 50px;">d3</span></div>
</body>
</html>DIV+CSS布局综合运用position+上下左右属性与float属性为网页进行布局
注意:浏览器的兼容性问题,特别是使用IE内核的浏览器对W3C的规范不怎么遵守
. block(区块)
block面板主要是设置对象文本的文字间距、对齐方式、上标、下标、排列方式、首行缩进等。
(1)word-spacing：设置单词之间的间距。可以设置负值。
默认值:normal
(2)letter-spacing：设置字符之间的间距。可以指定负值。因为中文也是字符, 这个参数可以设置文字间的间距。
默认值:normal
(3)vertical-align：指定元素的垂直对齐方式。针对<td>表格设置垂直对齐方法,但是对<div>设置无效,可以将display属性设置为table-cell值;
可以指定sub(下标)、super(上标)、top(与顶端对齐)、middle(居中)、bottom(与底端对齐)等。适用于行内块元素 img、input、td等
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
默认值: baseline
(4)text-align：设置文本的排列方式(适用于行内元素和行内块元素, 如 a、span、input、img、label等元素)。left(左对齐)、right(右对齐)、center(居中)、justify(两端对齐)。也可用于<hr/>下划线对齐方式
默认值： 如果 direction 属性是 ltr, 则默认值是 left；如果 direction 是 rtl，则为 right。(关于CSS direction 属性看下面的内容介绍)
text-align 和margin auto 区别
text-align 可以让块级元素里面的文字内容居中对齐.
文字内容 == (图片 input 行内元素 行内块元素)
但是对于里面的块级元素无效
让一个块级元素居中对齐 ： margin:0 auto;
(5)text-indent：设置文本第一行的缩进值。负值用于将文本第一行向外拉, 主要给<p>设置首行。
要在每段前空两格,可设置为2em，因为em是当前字体尺寸，2em就是两个字的大小。
默认值： not specified(没有规定的)
p{font-size:12px;text-indent:2em;}上述代码就是可以实现段落首行缩进24px(也就是两个字体大小的距离)。
(6)white-space：设置如何处理元素内的空白符。有三个选项可选：
normal 会将空白符全部压缩；
pre 则会如同处理pre标签内的文本一样处理这些空白符,也就是说，所有的空白符，包括空格，标签，回车，等都会得以保留；
nowrap 指定文本只有遇到br标签时才换行。
默认值: normal
(7)display: none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认值。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>)，表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>)，表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。
默认值： inline
常用的属性:
display:none; //隐藏
display:block //显示(将行内元素转换为块元素)
dispaly:inline //将块元素转换行内元素
dispaly:inline-block //将块元素转换为行内块元素
display:table-cell; //此元素会作为一个表格单元格显示(类似 <td> 和 <th>) 用于多行文本、块元素垂直居中以上转换涉及行内块元素(img、input)转换;
经过大量的测试证明：属性display是不能用于转换行内块元素(img、input)
同义词: 内联元素(行内元素)
4. box(方框或盒子) 主要针对图片、表格、层、段落(p)、标题(h1-h6)等
box面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。
(1)width：定义元素的宽。
默认值:auto
(2)height：定义元素的高。
默认值:auto
以上width、height属性如果是针对div标签设置css样式，则与定位设置窗口width、height属性一致(Dreamweaver会自动填充数据)
在父元素和子元素都设置了高度和宽度的情况下：
如果子元素的宽度超出了它的父元素的宽度, 则会父元素不会限制其显示宽度;
如果子元素的高度超出了它的父元素的高度, 则会父元素不会限制其显示高度;
(3)float：定义元素的漂浮方式。left 表示对象浮在左边、right表示对象浮在右边、none 表示对象不浮动。
默认值:none
一个span标签不需要转成块级元素, 就能够设置宽度、高度了。所以能够证明一件事儿, 就是所有标签已经不区分行内、块了。
也就是说, 一旦一个元素浮动了, 那么, 将能够并排了, 并且能够设置宽高了。无论它原来是个div还是个span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
(4)clear：不允许元素的漂浮，相对于前一个<div>设置浮动时，下一个有清除设置的元素就会移到它的下面。
left表示不允许左边有浮动对象 right表示不允许右边有浮动对象
none 表示允许两边都可以有浮动对象 both 不允许有浮动对象。
默认值:none
浮动的主要作用是将块元素排在同一行(span也可以设置浮动);
浮动元素它会向左或者向右进行浮动, 所谓浮动可以理解"飘";
浮动元素向它遇到父元素的边框就停止浮动;
浮动元素的层级会比普通元素要高, 并且它不会再占用原有的高度;
浮动元素只会影响后面的元素, 不会影响前面的元素：
浮动元素的后面的元素(可能是一个也可能是多个元素受到影响)也会继承浮动元素的特性, 它也会浮动了要解决这个问题有两办法;
第一个：需要清除浮动
第二个：给父元素设置一个高度(子元素都设置了height高度条件下), 不建议使用
清除浮动后它不会影响到它后面的元素, 父元素会将所有的浮动元素包围者
当然浮动元素对后面的元素的影响可以做首字母方法, 图文混排(文字环绕图片)等特效；
(5)padding：定义元素内容与其边框的空距(如果元素没有边框就是指页边的空白)。
可以分别设置分别设置上、右、下、左内边距。
padding-top
padding-right
padding-bottom
padding-left
p {padding:20px} 设置设置上、右、下、左内边距都为20px
p {margin: 20px 30px 30px 20px;} 设置padding-top padding-right padding-bottom padding-left分别为20px 30px 30px 20px
默认值：0。
要懂得, 用小属性层叠大属性：
padding: 20px;
padding-left: 30px;
注意：大属性要写在前面, 小属性写在后面;
比如：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}padding-left:10px和padding-right:20px没用, 因为后面的padding大属性, 层叠覆盖了。
(6)margin：定义元素的边框与其他元素之间的距离(如果没有边框就是指内容之间的距离)。
可以分别设置上边界、右边界、下边界、左边界的值。
margin-top
margin-right
margin-bottom
margin-left
p {margin:20px}
p {margin:10px 0px 15px 5px;}
默认值：0
marign：上边界值 右边界值 下边界值 左边界值
margin属性值必须按照上面顺序进行排列,以空格分开。如果仅输入一个值,则4个边界值会同时设置为此值。
如果仅输入两个的值,则缺少的值会以对边的设置值进行替代。例如：
div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/
5. border(边框) 针对段落(p标签)、图片、表格、标题(h1-h6)、form、input等(几乎所有的元素都可以设置边框)
border面板可以设置对象边框的宽度、颜色及样式。
(1)border-width：设置元素边的宽度。可以分别设定top(上边宽)、right(右边宽)、bottom(下边宽)、left(左边宽)的值。
border-top-width border-right-width border-bottom-width border-left-width
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。
默认值: medium
(2)border-color：设置边框的颜色。你可以分别对每条边设置颜色。
注意：我们可以通过设置不同的颜色做出亮边和暗边的效果，这样元素看起来是立体的。
border-top-color border-right-color border-bottom-color border-left-color
默认值: not specified(未规定的)
(3)border-style：设置边框样式。
border-top-style border-right-style border-bottom-style border-left-style
可以设置为none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、
groove(凹槽,3D凹线)、ridge(凸槽,3D凸线)、inset(凹边,3D嵌入线)、outset(凸边,3D浮出线)等边框样式。
默认值:none(无边框)
推荐：表单输入框：inset(凹边) 按钮：outset(凸边)
兼容性问题
比如, border:10px ridge red; 在chrome和firefox、IE中有细微差别：
如果公司里面的设计师, 处女座的, 追求极高的页面还原度, 那么不能使用css来制作边框。
就要用到图片, 就要切图了。所以, 比较稳定的就几个：solid、dashed、dotted, 其他的边框样式尽量不要用。
border可以没有： border: none;
某一条边没有： border-left: none;
也可以调整左边边框的宽度为0px： border-left-width: 0px;
注意：border-bottom-style：可以修改a链接的"下划线"的风格
border-bottom-width：可以修改a链接的"下划线"的宽度(粗细)
border-bottom-color：可以修改a链接的"下划线"的颜色
*请认真填写需求信息，我们会在24小时内与您取得联系。
