DOM（Document Object Model 文档对象模型）
DOM定义了表示和修改文档所需的对象、行为和属性，以及这些对象之间的关系。
获取DOM节点
1、 document.getElementById(id名)
var ul = document.getElementById("ul");
2、getElementsByTagName(标签名)
得到的是一个集合（不止一个，是一堆）
var aLi = document.getElementsByTagName("li");
3、getElementsByName( ) 通过Name值获取元素，返回值是集合，通常用来获取有name的input的值；
注：1不是所有的标签都有name值；
2低版本的浏览器会有兼容问题；
var input = document.getElementsByName("input");
4、 children属性，获得DOM元素的所有子元素；返回值是集合
var aLi = ul.children;
console.log(aLi);
5、parentNode属性，获得DOM元素的父级元素
console.log(ul.parentNode);
6、getElementsByClassName(class名称)
但是：IE8以下不能用
var input = document.getElementsByName("input");
console.log(input);
7、ES5选择器：
document.querySelector () > 一旦匹配成功一个元素，就不往后匹配了
console.log(document.querySelector("#ul"));
document.querySelectorAll () >>>> 强大到超乎想象;匹配到所有满足的元素, 支持IE8+
console.log(document.querySelectorAll(".li"));
属性获取和操作
1、getAttribute( )获取元素的属性值，他是节点的方法！所以前缀必须是节点！
document.getElementById( ID值 ).getAttribute( )
什么是元素属性呢？ class就是元素属性，写在标签内的所有东西都是标签属性， 比如link的href比如img的src....都是元素属性。
元素自带的属性可以直接用 . 语法获取，但是自定义属性需要 getAttribute() 和 setAttribute( ) 方法
var div = document.querySelector("div");
console.log(div);
console.log(div.className);
div.setAttribute("date-ddd", 123);
console.log(div.getAttribute("date-ddd"));
2、setAttribute( )设置元素的属性。同上；
有些小小的兼容性问题，低版本IE不兼容；
设置的属性永远都是字符串类型
div.setAttribute("date-ddd", 123);
3、removeAttribute( )删除属性；同上；
兼容性问题同上；
div. removeAttribute("date-ddd", 123);
DOM元素类型(元素、文本和属性)
nodeObj.nodeName // 节点名称
/*
元素节点：标签名（大写）
属性节点：属性名称
文本节点：#text
*/
nodeObj.nodeType // 1 ==> 元素节点 2 ==> 属性节点 3 ==> 文本节点
console.log(div.childNodes[0].nodeType);
console.log(div.childNodes[0].nodeName);
操作DOM
创建节点
var oDiv = document.createElement("div");
var h1 = document.createElement("h1");
h1.innerHTML = 2334;
div.appendChild(h1);
克隆节点
clonedNode = Node.cloneNode(boolean) // 只有一个参数，传入一个布尔值，true表示深客隆，复制该节点下的所有子节点；false表示浅克隆，只复制该节点
var hh = h1.cloneNode(true);
div.appendChild(hh);
插入节点
parentNode.appendChild(childNode); // 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode); //将newNode插入targetNode之前
div.appendChild(h1);
div.insertBefore(hhh,span);
替换节点
parentNode.replaceChild(newNode, targetNode); //使用newNode替换targetNode
div.replaceChild(span,hhh);
移除节点
parentNode.removeChild(childNode); // 移除目标节点
node.parentNode.removeChild(node); //在不清楚父节点的情况下使用
childNode.remove() //IE不支持
div.removeChild(hh);
h1.parentNode.removeChild(h1);
span.remove
文档碎片
<script>
var ul = document.querySelector("ul");
var cache = document.createDocumentFragment();
for(var i = 0; i < 20; i++){
var li = document.createElement("li");
li.className = "box";
li.innerHTML = i;
cache.appendChild(li);
}
ul.appendChild(cache);
</script>
node节点（更详细的获取（设置）页面中所有的内容）
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
元素是节点的别称，节点包含元素当然节点还有好多细化的种类
根节点：root>>>>HTML没有父节点；
节点操作（通过父子系关系）
childNodes 获取当前元素的所有子节点；
nodeType 节点种类，返回值是数字；
nodeValue 获取（文字）节点的文本内容；
nodeName 返回node节点名称（#text，注释， 标签....）；
nodetype.png
<ul>
qwwertrt
<li class="li" id="li" date-index="1"><a>hhbb</a></li>
<li>zxxc</li>
</ul>
<script>
var ul = document.querySelector("ul");
console.log(ul.childNodes);//查找获取当前元素的所有子节点
console.log(ul.childNodes[0].nodeValue);//文本有nodevalue
console.log(ul.childNodes[1].nodeValue);//null 元素节点的nodevalue为空
console.log(ul.childNodes[1].innerHTML);//<a>hhbb</a> innerHTML会将标签解析
console.log(ul.childNodes[1].innerText);//hhbb 只输出文本
ul.childNodes[1].innerHTML = "<a>123</a>";
ul.childNodes[1].innerText = "<a>345</a>";//<a>345</a> 不会解析标签
console.log(ul.childNodes[1].outerHTML);//<li class="li" id="li" date-index="1"><a>345</a></li>
console.log(ul.childNodes[1].attributes);//获取所有，该节点的属性信息
console.log(ul.childNodes[1].attributes[0]);//返回属性节点个数
console.log(ul.childNodes[1].attributes["id"]);//返回属性为 id 的节点
</script>
innerHTML会将标签解析；
nodeValue不会进行解析，会将标签名转译成字符串，直接输出.
attributes属性
var oBox = document.getElementById('box');
console.log(oBox.attributes)//获取所有，该节点的属性信息；
console.log(oBox.attributes.length);//返回属性节点个数
console.log(oBox.attributes[0]);//返回第一个属性节点
console.log(oBox.attributes[0].nodeType);//2，属性
console.log(oBox.attributes[0].nodeValue);//属性值
console.log(oBox.attributes['id']); //返回属性为 id 的节点
console.log(oBox.attributes.getNamedItem('id'));// 获取 id 的节点；
attributes属性 一般只用作获取，设置使用setAttribute()
childNodes 获取当前元素节点的所有子节点
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
previousSibling 获取当前节点的前一个同级节点
nextSibling 获取当前节点的后一个同级节点
****以上五中方法都包含空白文本节点
firstElementChild 获取当前元素节点的第一个元素子节点
lastElementChild 获取当前元素节点的最后一个元素子节点
ownerDocument 获取该节点的文档根节点，相当与 document
parentNode 获取当前节点的父元素
<ul>
rgdtfre
<li class="li" id="li" data-index="1"><a>dgrsdc</a></li>
<li>dgrsdc</li>
</ul>
<script>
var ul = document.querySelector("ul");
console.log(ul.childNodes);// 获取当前元素节点的所有子节点
console.log(ul.firstChild);// 获取当前元素节点的第一个子节点
console.log(ul.lastChild);// 获取当前元素节点的最后一个子节点
console.log(ul.firstElementChild);// 获取当前元素节点的第一个元素子节点
console.log(ul.lastElementChild);// 获取当前元素节点的最后一个元素子节点
console.log(ul.lastElementChild.previousSibling); 获取当前元素节点的最后一个元素子节点的前一个同级节点
console.log(ul.lastElementChild.previousElementSibling);获取当前元素节点的最后一个元素子节点的后一个同级节点
</script>
++DOM尺寸和位置
DOM尺寸
DOM尺寸.png
- 获取非行内样式（兼容问题）
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
位置坐标
位置坐标.png
offsetParent 这个属性的返回值是它根据谁定位的，如果它的所有父元素都没有定位，那么返回body.
案例：
1.位置移动动画
<body>
<div style="width: 200px;height: 200px;background: red;position: absolute;">box</div>
<script>
var div = document.querySelector("div");
div.onclick = function(){
var timer = setInterval(function(){
div.style.left = div.offsetLeft + 9 + "px";
if(div.offsetLeft >= 500){
clearInterval(timer);
div.style.left = "500px";
}
},30);
}
</script>
</body>
2.全选和反选
<body>
全选：<input type="checkbox" id="checkAll">
<div id="content">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</div>
<script>
var checkAll = document.querySelector("#checkAll");
var aCheck = document.querySelector("#content").children;
var n = 0;
checkAll.onchange = function(){
//console.log(checkAll.checked);
n = checkAll.checked ? aCheck.length : 0;
for(var i = 0; i < aCheck.length; i++){
aCheck[i].checked = checkAll.checked;
}
}
for(var j = 0; j < aCheck.length; j++){
aCheck[j].onchange = function(){
/* if(this.checked) n++;
else n--; */
this.checked ? n++ : n--;
/* if(n === aCheck.length) checkAll.checked = true;
else checkAll.checked = false; */
checkAll.checked = n === aCheck.length;
}
}
</script>
</body>
3.tab选项卡
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0 ;padding: 0;}
.tab{width: 500px;height: 300px;margin: 20px auto 0;}
.tab ul{border: 1px solid #ccc;height: 32px;}
.tab li{width: 33%;height: 30px;list-style: none;float: left; line-height: 30px;text-align: center;font-size: 18px;}
.tab li.ac{background: #ccc;}
.tab img{width: 500px;height: 269px;display: none;}
.tab img.ac{display: inline-block;}
</style>
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<div id="tab" class="tab">
<ul>
<li class="ac">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<div id="content">
<img class="ac" src="http://5b0988e595225.cdn.sohucs.com/images/20170729/8dec04ede4894f978ab2b59ff1144699.jpeg" />
<img src="http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180726/1a5259dd8b1a42f9b435fa3ea9043cc9.jpeg" />
<img src="http://5b0988e595225.cdn.sohucs.com/images/20180401/90674fc5bf9a4ae7bd4d8c424a09c917.jpeg" />
</div>
</div>
<script>
var aLi = document.querySelector("ul").children;
var aImg = document.querySelector("#content").children;
for(var i = 0; i < aLi.length; i++){
aLi[i].index = i;
aLi[i].onclick = function(){
//先全部清空,再给自己加上ac
for(var j = 0; j < aLi.length; j++){
aLi[j].className = "";
aImg[j].className = "";
}
this.className = "ac";
aImg[this.index].className = "ac";
}
}
</script>
</body>
</html>
网友评论