关于基础的元素选择器，元素的关系选择器，其他节点选择器，以及关于属性的操作的总结
<body>
<div id="box">1</div>
<div id="box">2</div>
<div id="box">3</div>
<div class="cont">4</div>
<div class="cont">5</div>
<div class="cont">6</div>
<div class="msg">
<div class="xbox">
<h2>二级标题3</h2>
<h2>二级标题4</h2>
</div>
<h2>二级标题1</h2>
<h2>二级标题2</h2>
</div>
<span>7</span>
<span>8</span>
<span>9</span>
<input type="text" name="user">
<input type="text" name="pass">
<input type="text" name="user">
</body>
元素的基础选择器：
1:querySelector：无论如何只能选择一个元素，单个元素，哪怕有多个
var ele = document.querySelector("#box");
console.log(ele);//<div id="box">1</div>
console.log(ele.innerHTML);//1
var ele = document.querySelector(".msg h2");//h3选择的是后代元素的第一个
var ele = document.querySelector(".msg>h2");//h1选择的是直系子代的第一个
2：querySelectorAll：可以选择多个，无论如何选择出的都是数组，哪怕只有一个，解析数组后才能使用标签
var ele = document.querySelectorAll("#box");
console.log(ele);//得到的是一个数组，可以通过数组的序列选择，来选定需要选择的元素
元素的关系选择器
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<div class="box">
<div class="xbox">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
</div>
<em>1</em>
<em>2</em>
<em>3</em>
</body>
var oXbox = document.querySelector(".xbox");
1：父选子元素：子可以有多个，必须是数组，要拿到具体的元素，必须先解析数组
var child = oXbox.children;
console.log(child);//得到一个p的数组
2：子选父元素：父只能有一个，只能是单个元素
var parent = oXbox.parentNode;
console.log(parent);//
3：第一个子元素
var first = oXbox.firstElementChild;
console.log(first);
4:最后一个子元素
var last = oXbox.lastElementChild;
console.log(last);
5：上一个兄弟元素节点
var obox = document.querySelector(".box");
var c=obox.previousElementSibling;//.box的上一个兄弟元素节点
console.log(c);//<span>3</span>
6：下一个兄弟元素节点
var b=obox.nextElementSibling;//.box的下一个兄弟元素节点
console.log(b);//<em>1</em>
其他节点选择器
<body>
<span>1</span>
<span>2</span>
<span>3</span>
<div class="box" id="a" title="b" abc="c" ajsjsd="d">
<div class="xbox">
hello
<p>段落1</p>
<!-- <p>段落2</p> -->
<p>段落3</p>
</div>
</div><em>1</em>
<em>2</em>
<em>3</em>
</body>
var oxbox = document.querySelector(".xbox");
1：子节点选择器
var child = oxbox.childNodes;
console.log(child);//得到一个length为7的数组，拿到具体的子节点，需要借助数组的索引
2:第一个子节点和最后一个子节点
console.log(oxbox.firstChild);//是一个text
console.log(oxbox.lastChild);//是一个text
3:上一个兄弟节点，下一个兄弟节点
var obox = document.querySelector(".box");
console.log(obox.previousSibling)//是一个text
console.log(obox.nextSibling)//<em>1</em>
4:属性节点，需要配合单独的属性节点选择器选中，不在DOM的家族关系中
var obox = document.querySelector(".box");//.box的类型为对象
var b=obox.attributes//选择.box中的属性节点
console.log(b);//一个类似于数组的对象，可以使用数组的操作方法
得到具体的节点中的属性，需要结合数组的索引
对属性的操作
<body>
<div class="box" title="这是一个title" abc="hello" href="asdas" ><i>内容</i></div>
</body>
一：内置属性:
相当于是对对象的操作（点语法,[]中括号语法）
var obox=document.querySelector(".box");
1:可见的
console.log(obox.className)//box;
obox.className = "qwewqe";//页面上的div中变为class="qwewqe"
2：不可见的:
innerHTML,innerText,tagName
console.log(obox.innerHTML)//打印div中的内容
console.log(obox.innerText)//打印div中的内容，包括内容中的标签
console.log(obox.tagName)//打印这个标签的类型
二：自定义属性:
1:可见的
可见:Attribute系列：set，get，remove
console.log(obox.getAttribute("abc"))//hello
obox.setAttribute("qwe","hahahahah")//在div中创建了一个qwe:"hahhahhah"的属性
obox.removeAttribute("abc")//删除了abc这个属性
2:不可见的
就是讲元素对象当做对象操作
节点的操作
<body>
<div class="box" title="这是一个title" abc="这是一个自定义abc">
<span>1</span>
hello
<!-- 这是一个注释 -->
<span>2</span>
<em>3</em>
<em>4</em>
<em>5</em>
</div>
</body>
/ 节点：
// 元素，文本，注释，属性节点
// 节点类型:nodeType
// 节点名字:nodeName
// 节点值:nodeValue
1:对子节点的操作
var obox = document.querySelector(".box")//选中元素
var child = obox.childNodes;//选中节点的子节点，得到一个数组，对相应的子节点操作，需要借助索引
console.log(child[1].nodeType); //1
console.log(child[1].nodeName); //SPAN
console.log(child[1].nodeValue); //null
2:对属性节点的操作
var obox = document.querySelector(".box")//选中元素
var attr = obox.attributes;//选中元素中的属性节点
DOM的样式操作
<style>
.box{width:100px;height:100px;background:red;border: solid 20px yellow;}
</style>
1:获取行内和给行内样式
var obox = document.querySelector(".box");
console.log(getComputedStyle(obox,false).width)//获取width的宽度值：100px;
2：设置样式:obox.style.width="200px";//将width的宽度值设置成200px;
obox.style.cssText="text-align:right;"//比较常用
// 获取样式就用：getStyle
// 设置样式就用：style属性
获取样式只能在正常浏览器中使用，IE除外，参照兼容的封装函数
兼容的封装函数：
function getStyle(ele,attr){
if(ele.currentStyle){ //以IE的书写格式获取
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
console.log(getStyle(obox,"width"))
console.log(getStyle(obox,"background-color"))
console.log(getStyle(obox,"border-width"))
DOM尺寸的获取
<style>
.box{width:100px;height:100px;padding:10px;border: solid 20px black;margin: 60px;position: relative;left:80px;top:80px;overflow: auto;}
</style>
<body>
<h2>321213</h2>
<div class="box">
出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条出现滚动条
</div>
</body>
1:div尺寸的获取//比较常用
console.log(obox.offsetHeight); //cont+padding+border 160=100+20+40
console.log(obox.clientHeight); //cont+padding 120=100++20
console.log(obox.scrollHeight); //包括可以滚动的尺寸超出边框的内容也包括在内
2:div相对于页面位置的值的获取
console.log(obox.offsetTop); //相对于页面或包含块偏移的位置
console.log(obox.offsetLeft); //相对于页面或包含块偏移的位置
扩展：三木运算
var a = n<10 ? "0"+n : n;
补0：如果你<10 则补0 否则为n;
DOM元素的操作
// 创建元素
// var abc = document.createElement("div");//比较常用
// console.log(abc);
// 将元素插入到指定的父级的最后一个子元素
body.appendChild(abc);
// 删除元素
// var box = document.querySelector(".box")
// var op = box.children[0];
// box.remove();
// box.removeChild(op);
// op.remove()
// 改标签：
var box = document.querySelector(".box")
// console.log(box.outerHTML)
// box.outerHTML = "<span>"+ box.innerHTML +"</span>";
