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="width: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