JS学习总结之操作文档对象模型
操作文档对象模型
DOM 结构树
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的)。
分为：
1.元素节点
2.文本节点
3.属性节点
不属于元素节点的子节点
4.文档节点(document)
处理元素节点
method
1.document.getElementById(); //根据ID
2.document.getElementsByTagName(); //根据标签名
返回名为NodeList的DOM对象，使用时建议先通过length属性检查其长度。
获取节点有两种可选：
a. 使用item方法
b. 使用数组下标
3.document.getElementsByClassName(); //根据Class,作为新成员，浏览器支持情况暂不太好
4.querySelector()、querySelectorAll(); //通过CSS选择器,亦为新成员
前者返回第一个匹配的元素，后者返回NodeList。
e.g document.querySelector("#header");
处理属性节点
method
1.getAttribute(); //获取属性
建议先使用hasAttribute();
e.g document.getElementById("pl").getAttribute("class");
2.setAttribute(); //设置属性
3.removeAttribute(); //移除属性
建议先使用hasAttribute();
4.hasAttribute();
处理文档节点
直接通过innerHTML属性
e.g
a.document.getElementById("pl").innerHTML;
b.document.getElementById("pl").innerHTML("<p>hello world</p>");
遍历DOM
method
1.parentNode;
e.g document.getElementById("pl").parentNode.setAttribute("class","liu");
2.previousSibling;
3.nextSibling;
4.firstChild;
5.lastChild;
访问首尾两个子节点时，由于空白的原因，往往未必返回预期的子元素
DOM中动态添加移除节点
method
1.createElement();
2.createTextNode();
3.appendChild();
4.removeChild();
新增元素
1.创建元素
2.填充内容
3.放入DOM
e.g
var tar=document.getElementById("pl");
var p=document.createElement("p");
var tex=p.createTextNode("hello world");
tar.appendChild(tex);
移除元素
e.g
var tar=document.getElementById("pl");
var t=document.getElementById("pll");
tar.removeChild("t");
修改元素样式
1.用JS修改标签的 class 属性值：
更改一个标签的 class 属性的代码是：
document.getElementById( id ).className = 字符串;
className 是 DOM 对象的一个属性，它对应于标签的 class 属性。另外你也可以用上述的setAttribute()方法修改
2.用JS修改标签的 style 属性值：
style 属性也是在标签上引用样式表的方法之一，它的值是一个CSS样式表。
更改一个标签的 CSS 属性的代码是：
document.getElementById( id ).style.属性名 = 值;
style 是 DOM 对象的一个属性，它本身也是一个对象。属性名 是 Style 对象的属性名，它和某个CSS属性是相对应的。
附：盒子标签和属性对照
CSS语法（不区分大小写） JavaScript语法（区分大小写）
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
颜色和背景标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
样式标签和属性对照
CSS语法（不区分大小写） JavaScript 语法（区分大小写）
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
文字样式标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
文本标签和属性对照
CSS 语法（不区分大小写） JavaScript 语法（区分大小写）
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign
