节点操作
增
创建节点:
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