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.定义和用法

　　html() 方法返回或设置被选元素的内容 (inner HTML)。

　　如果该方法未设置参数，则返回被选元素的当前内容。

语法:  $(selector).html(content)

e.g

　　$("#userName").html(userData.username)

b.使用函数来设置元素内容

　　使用函数来设置所有匹配元素的内容。

语法:   $(selector).html(function(index,oldcontent))

（2）关于jquery中html()、text()、val()的区别

　　.html()用为读取和修改元素的HTML标签--对应js中的innerHTML 
　　　　.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素
　　.text()用来读取或修改元素的纯文本内容--对应js中的innerText 
　　　　.text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上
　　.val()用来读取或修改表单元素的value值   
　　　　.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
    关于三者的区别  
　　1. val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不           
　　　　一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。   
　　2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。