js和jq文档操作

JS文档操作

一、dom树结构

　　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属性是相对应的。

JQuery文档操作

一、jQuery 文档操作方法

（1）html() 方法

a.定义和用法