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