JS 之DOM1
一 DOM 概念：
document object model 文档对象模型，浏览器把拿到的html代码,结构化成一个浏览器能识别并且js可操作的一个模型。
特点： 1）页面都是字符串，JS把字符串转成DOM树。DOM树把字符串转成节点，浏览器就是操作节点的
2） DOM赋予我们操作页面的能力
3） DOM是创建，插入，修改，删除页面元素的标准。
二 DOM 常用API
1 attributes 属性节点 返回集合，每个属性都有一个自己对应的下标，有一个length属性，元素身上有多少个属性节点
2 childNodes 元素身上的第一层子节点（集合）
3 nodeName 节点名称
4 nodeType 节点类型，返回的数字
1 ----元素节点
2 ---属性节点
3 ----文本节点
8 ---注释节点
9 ----文档节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta > <title>Document</title> <style type="text/css"> </style> </head> <body> <div id="box" class="div" style="width:300px"> <p> <span>xubj</span> </p> <!-- 这里是注释 --> </div> </body> </html> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var box=document.getElementById("box"); var attr=box.attributes; console.log(attr); // id class style console.log(attr.length); // 3 var child=box.childNodes; console.log(child);//集合 text p text comment text //元素节点（标签） console.log(box.nodeName); // DIV console.log(box.nodeType); // 1 //属性节点 console.log(attr[0].nodeName); // id console.log(attr[0].nodeType); // 2 //文本节点 console.log(child[0].nodeName); // #text console.log(child[0].nodeType); // 3 //注释节点 console.log(child[3].nodeName); // #comment console.log(child[3].nodeType); // 8 //文档节点 console.log(document.nodeName); // #document console.log(document.nodeType); // 9 </script>
5 tagName 标签名称 ，nodeName 任何一个节点都有这个属性，tagName 只有元素节点才有这个属性
console.log(box.nodeName); //DIV console.log(box.tagName); //DIV console.log(document.nodeName);// #document console.log(document.tagName); // undeifined
6 parentNode 元素的父节点
var box=document.getElementById("box"); var span=document.querySelectorAll("span")[0]; console.log(span.parentNode); // p
7 children 父.chidren,获取到父级的第一层子元素，有一个length属性【非标准】
childNodes 获取元素的第一层所有子节点，包含文本，注释
<ul>
<li><span>隐藏1</span></li>
<li><span>隐藏2</span></li>
<li><span>隐藏3</span></li>
<li><span>隐藏4</span></li>
<li><span>隐藏5</span></li>
<!--这里是注释-->
</ul>
<script>
var ul=document.querySelector("ul");
console.log(ul.children); //[li,li,li,li,li]
function getChild(parent){
var child=parent.childNodes;
var arr=[];
for(var i=0;i<child.length;i++){
if(child[i].nodeType===1){
arr.push(child[i]);
}
}
return arr;
}
var lis=getChild(ul);
console.log(lis);//[li,li,li,li,li]
</script>
9 previousElementSibling 上一个兄弟节点，找不到返回null
10 nextElementSibling 下一个兄弟节点，找不到返回NULL
11 firstElementChild 找到第一个子节点
12 lastElementChild 父级.lastElementChild 找到最后一个子节点
<ul>
<li><span>隐藏1</span></li>
<li><span>隐藏2</span></li>
<li><span>隐藏3</span></li>
<li><span>隐藏4</span></li>
<li><span>隐藏5</span></li>
<!--这里是注释-->
</ul>
<script type="text/javascript">
var ul=document.querySelector("ul");
var lis=document.querySelectorAll("li");
lis[2].previousElementSibling.style.color="red"; //上一个兄弟元素
lis[2].nextElementSibling.style.color="green"; // 下一个兄弟元素
ul.firstElementChild.style.background="orange"; // 第一个子元素
ul.lastElementChild.style.background="blue"; // 最后一个子元素
</script>
13 属性的操作方法
1) .属性名
2) [属性名]
3) getAttribute(attr) 获取元素的属性
4) setAttribute(attr,value) 设置属性
5）removeAttribute(attr) 删除属性
<div id="box" data-v="xubj" class='div'> <img id='pic' src="images/1.jpg"> </div> <script type="text/javascript"> var box=document.getElementById("box"); var pic=document.getElementById("pic"); console.log(box.id);// box console.log(pic['src']);// 获取的是绝对路径 eg:http://www... console.log(box.getAttribute('class'));// div console.log(pic.getAttribute("src")); //images/1.jpg 相对路径 box.setAttribute("class","xubj"); console.log(box.getAttribute("class"));// xubj
