<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function getDom01(){ var div = document.querySelector(".box");
//得到属性 class属性 console.log(div.className); //得到的是值 console.log(div.getAttribute("class")); //得到集合 var attrs = div.attributes; for(var i=0;i<attrs.length;i++){ var attr = attrs[0]; console.log(attr.value); }
console.log("--------------------"); console.log(div.nodeName); console.log(div.nodeType); console.log(div.nodeValue);
//console.log(div) }
function setAttr(){ var div = document.querySelector(".box"); div[‘test‘] = "ttttt"; //设置属性的值 div.setAttribute("testtest","tttttt"); //div.setAttribute("name","divdiv"); div.name = "divdiv"; div.removeAttribute("name"); }
function setTextText(){ var div = document.querySelector(".box"); //console.log(div.textContent) console.log(div.innerHTML); //改变文本里面的额内容 div.innerHTML = "<h1>this is a innerHTML test</h1>"; }
/** * * 元素节点 属性节点 文本节点 * * NodeName 元素名 属性名 #text * * NodeType 1 2 3 * * NodeValue null 属性值 文本内容 * */
//得到所有的子元素 function getChilds(_parent){ var childs = []; if(_parent){ var child = _parent.childNodes; for(var i=0;i<child.length;i++){ var c = child[i]; if(c.nodeType === 1){ childs.push(c); } } } return childs; }
function testGetChilds(){ var childs = getChilds(document.querySelector(".box")); console.log(childs) } /** * 通用的得到上一个下一个元素 */ function getSibling(_dom,sibling){ if(_dom){ sibling = sibling || "nextSibling"; _dom = _dom[sibling]; while(_dom && _dom.nodeType != 1) { _dom = _dom[sibling]; } return _dom; } return null; }
//得到同级的下一个元素 function getNextSibling(_dom){ if(_dom){ _dom = _dom.nextSibling; while(_dom.nodeType != 1){ _dom = _dom.nextSibling; } return _dom; } return null; }
function testGetSibling(){ console.log(getSibling(document.querySelector(".box"),"previousSibling")) } //获取上一个节点 function getPreviousSibling(_dom){ return getSibling(_dom,"previousSibling"); }
function testStyle(){ var div = document.querySelector("#box2"); div.style.border = "1px solid red"; } function testStyle1(){ var div = document.querySelector("#box2"); //改变样式的注意事项 //当不是一个规则单词的时候 div.style.border = "none"; //用中括号赋值 div.style["margin-left"] = "10px"; //满足驼峰命名 div.style.marginRight = "20px"; }
</script></head><body><input type="button" onclick="getDom01()" value="getDom01"/><input type="button" onclick="setAttr()" value="setAttr"/><input type="button" onclick="setTextText()" value="setTextText"/><input type="button" onclick="testGetChilds()" value="testGetChilds"/><input type="button" onclick="testGetSibling()" value="testGetSibling"/><input type="button" onclick="testStyle()" value="testStyle"/><input type="button" onclick="testStyle1()" value="testStyle1"/><hr/><div class="box" name="div"> <div id="box1" style=""> <span>this is a span in div 1</span> <span>this is a span in div 2</span> </div> <div id="box2"> <span>this is a span in div 1</span> <span>this is a span in div 2</span> </div> <div id="box3"> <span>this is a span in div 1</span> <span>this is a span in div 2</span> </div> <div id="box4"> <span>this is a span in div 1</span> <span>this is a span in div 2</span> </div></div></body></html>
时间： 2024-12-28 21:04:14