<!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>