js

节点操作

增

创建节点：

document.createElement("BUTTON");//创建元素节点
document.createTextNode("CLICK ME");//创建文本节点

元素添加：

元素节点.innerHTML="HTML代码"
例子：
document.querySelector("[class=pd]") .innerHTML="<p></p>"

元素节点.appendChild(p)(参数为节点)
例子：
p=document.createElement("p")
document.querySelector("[class=pd]") .appendChild(p)


p=document.getElementsByClassName("pd")[0]
pr=document.createElement("p")
pi=document.getElementsByTagName("p")[0]
p.insertBefore(pr,pi)

删：

node.removeChild(node)
例子：
 p=document.getElementsByClassName("pd")[0]
 pi=document.getElementsByTagName("p")[0]
 p.removeChild(pi)

改：

document.getElementById("myList").replaceChild(newnode,oldnode);
例子：
p=document.getElementsByClassName("pd")[0]
pr=document.createElement("p")
pi=document.getElementsByTagName("p")[0]
p.replaceChild(pr,pi)

查：

直接获取元素节点
document.getElementById(id);　//返回对拥有指定id的第一个对象进行访问（所有浏览器支持）

document.getElementsByName(name);　//返回带有指定名称的节点集合 （所有浏览器支持）

document.getElementsByTagName(tagname); //返回带有指定标签名的对象集合 （所有浏览器支持）

document.getElementsByClassName(classname); //返回带有指定class名称的对象集（最低ie9）合 
document.querySelector("[class=pd]") .innerHTML="<p></p>"只获取第一个匹配的元素（最低ie8）
document.querySelectorAll("[class=pd]") .innerHTML="<p></p>"获取所有匹配到的元素（最低id9）

document.documentElement是专门获取html这个标签的//获取html的方法（document.documentElement）

document.body是专门获取body这个标签的。//获取body的方法（document.body）




间接获取元素节点
属性：
元素节点.childNodes，或取该元素节点下的所有子节点；（所有节点，包括文本节点）
元素节点.children，或取该元素节点下的所有子节点；（只包括元素节点）
元素节点.firstChild，获取该元素节点的第一个子节点；
元素节点.lastChild，获取该元素节点的最后一个子节点；
元素节点.parentNode，获取该元素的父节点；

方法：
元素节点.hasChildNodes()判断元素节点存在 例子：document.getElementById("myList").hasChildNodes()（存在子节点返回true，否者返回false）

属性操作

创建文本节点：create_text_p=document.createTextNode("<p></p>")
创建元素节点：create_p=document.createElement("p")
创建属性节点：    p=document.createAttribute("name")
    为创建的元素赋值：p.value="ju"
获取属性节点：(参数为需要获取的属性）（return有返回获取的属性值，属性不存在返回null）
document.getElementsByClassName("pd")[0].getAttribute("class")
修改元素节点属性：（参数为属性节点）　
　　document.getElementsByClassName("pd")[0].setAttributeNode(p)
修改元素节点属性：（参数为字符串）(推荐)
　　document.getElementsByClassName("pd")[0].setAttribute("p","helo")
移除属性：
　　document.getElementsByClassName("pd")[0].removeAttribute("class")

css操作：

行内样式：就是代码写在具体网页中的一个元素内；比如：<div style="color:#f00"></div>
内嵌式：就是在</head>前面写；比如：<style type="text/css">.div{color:#F00}</style>
外部式：就是引用外部css文件；比如：<link href="css.css" type="text/css" rel="stylesheet" />

获取：

元素节点.style.backgroundColor（单个元素，只能获取行内样式，如果样式是js中的关键字则需要在样式前+css，如果样式由下划线连接则需要去掉下划线将后面的单词首字母变为大写）（元素节点.style=null | 元素节点.style=""）

元素节点..style.cssText="40%; height:10%"（css集合，只能获取行内样式）

设置：

元素节点.style.backgroundColor=“red”(单个元素操作行内样式)

元素节点.style.cssText（css集合，操作行内样式）

操作内嵌式css：（只限内嵌式，根据css选择符选择，不包括外部式）

function getstyle(sname) { 
    for (var i=0;i< document.styleSheets.length;i++) { 
        var rules; 
        if (document.styleSheets[i].cssRules) { 
            rules = document.styleSheets[i].cssRules; 
        } else { 
            rules = document.styleSheets[i].rules; 
        } 
        for (var j=0;j< rules.length;j++) { 
            if (rules[j].selectorText == sname) { 
                return rules[j].style; 
            } 
        } 
    } 
}
getstyle(".pd").display//根据类名获取单个css
   getstyle("#id").fontStyle = " italic "//根据id名获取单个css
getstyle(".pd")//获取所有css
getstyle(".pd").display = "inline";//设置css