JS DOM 对象
声明是DOM
document Object Model(文档对象类型)，DOM是针对html和XML文档的一个API。DOM描绘了一个层次化的节点树
允许开发人员添加、移除和修改页面的某一部分
HTML DOM定义了访问和操作HTML文档的标准方法，要改变页面某个东西，javascript 就需要获取对HTML文档中所有元素
进行访问的入口，这个入口连同对HTML元素进行添加，移动，改变和移除的方法和属性，都是通过文档对象模型来获得的(DOM)
我们可以通过javascript操作DOM 可以对节点实现增删改查操作，可以动态添加标签和属性等
声明是节点
HTML文档中的每个成份都是一个节点。
1.节点类型
DOM是这样规定的：整个文档是一个文档节点，每个HTML标签是一个元素节点，包含在HTML元素中文本是一个文本节点，每一个HTML属性是一个属性节点，注释属于注释节点。
2.节点层次关系：
节点彼此都有等级关系。HTML文档中所有几点组成了文档树(或节点树)，HTML文档中的每个元素、属性、文本等都代表着树中的一个节点，树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点止。
head和body 的父节点是html节点，文本节点"hello word“的父节点是p节点。
head节点有一个子节点，title节点，title节点也有一个子节点；文本节点"DOM Tutorial"。
当节点分享同一个父节点时，它们就是同辈(同级节点)，比方说，h1和p是同辈，因为她们呢的父节点是body
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些节点的子节点
节点也可以拥有先辈，先辈是某节点的父节点，或者父节点的父节点，以此类推，比方说，所有的文本节点都可把html节点作为先辈节点
3.点属性
每个节点都拥有包含关于节点某些信息的属性，这些属性是
nodeName(节点名称)
元素节点的nodeName 是标签名称
文本节点的nodeName 永远是#text
注释节点的nodeName 永远是#comment
nodeValue(节点值)
文本节点nodeValue 属性包含文本
元素节点nodeValue 不可以用
注释节点nodeValue 包括注释内容
nodeYype(节点类型)
元素------1
属性------2
文本------3
注释-----8
文档-----9
<script> //输出BODY 标签的名称 console.log(document.body.nodeName); //输出#text？？？ body标签中不是有个div标签吗 为什么它的第一自己点的名字是文本呢？ 因为有换行，换行也属于文本节点 console.log(document.body.firstChild.nodeName); </script>
nodeName 如果是标签，nodName就是标签名
nodeValue 如果是注释nodeValue就是注释的内容
nodeType 可以用来判断当前是不是文档节点
获取DOM元素：
document.getElmentById() 根据ID名获取DOM元素 唯一一个 id不能重复
document.getElementsByTagName() 根据标签名获取所有的DOM元素 返回HTMLCollection标签类型，类数组，不能使用数组的方法
document.getElementsByClassName() 根据class获取元素列表 也返回HTMLCollection
document.getElementsByName() 针对表单form对应获取相应的元素，返回NodeList节点列表，可以使用foreach
<body>
<form action="#" method="GET">
<input type="radio" name="ab" value="1">
<input type="radio" name="ab" value="2">
<input type="radio" name="ab" value="3">
<input type="radio" name="ab" value="4">
<input type="radio" name="ab" value="5">
<input type="submit" value="提交">
</form>
<script>
//循环遍历nodelist
sname=document.getElementsByName('ab');
for(i=0;i<sname.length;i++){
console.log(sname[i]);
}
//使用foreach 循环遍历
sname.forEach(function (t){
console.log(t);
});
</script>
document.querySelector() 根据选择器选择元素 css选择器
选择id=a class=abc 的一个元素
var lis=document.querySelectorAll("#a .abc");
document.querySelectorAll()
选择id=a 下面class=abc的所有元素，返回一个NodeList 需要遍历
var lis=document.querySelectorAll("#a .abc");
var a=document.querySelectorAll("#css .abc");
a.forEach(function (e){console.log(e);
});
节点遍历
childNodes：获取所有子节点 (包含注释)
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].childNodes; console.log(a); //返回 text ul text comment注释 </script>
children：所有事标签类型的子节点 获取所有子元素
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].children; console.log(a); //返回 HtMLCollection ul 只返回标签 </script>
parentNode：获取已知节点的父节点
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].parentNode; console.log(a); //返回 body标签节点 </script>
firstElemntChild：第一个子节点（元素）
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].firstElementChild; console.log(a); //获取第一子元素 返回ul标签 </script>
firstChild：第一个子节点
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> <!-- 会显示我吗 --> </div> <script> var a=document.getElementsByTagName('div')[0].firstChild; console.log(a); //获取第一子节点 返回#text(文本或换行) </script>
lastElementChild：最后一个子节点（元素）
lastChild：最后一个子节点
nextElementSibling：下一个兄弟节点（元素）
nextSibling：下一个兄弟节点
previousElementSibling：前一个兄弟节点（元素）
previousSibling：前一个兄弟节点
<div class="contnt"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var div=document.getElementsByTagName("div")[0]; for(i=0;i<div.firstElementChild.children.length;i++){ div.firstElementChild.children[i].innerHTML=i+1; } </script>
创建元素
document.createElment("标签名")：创建新元素
document.body.appendChild("div"); 将创建的div元素 插入到body的尾部
document.createTextNode("");：创建文本节点
父元素.prepend('ul');将创建的ul,插入到父元素的最前面
也可以使用insertBefore("newnode,oldnode"); 将newnode添加在oldnode前面
案例 如，写一个button 按钮 不写值
<button></button> <script> //获取button 标签 var btn=document.querySelector("button"); //创建文本节点 var text=document.createTextNode("按钮"); //把文本节点插入到按钮标签中 btn.appendChild(text); </script>
document.createDocumentFragment(); 创建一个包裹 之后document.body.appendChild(包裹) 这样做提高性能
注意：
如果我们创建一个div，想在里面添加文本 有两种方法，如果想追加文本呢 那需要在创建一个文本节点，appendChild()追加下去
如果不需要 可以使用div.textContent("内容")即可以
删除复制替换
删除元素 分为两种
删除自己 remove()
删除子元素 removeChild()
ul.remove();将自己及下面的子元素都删除
ul.removeChild(元素); 删除自己以外的子元素 参数元素
<script> //删除ul 下所有子元素 var ul=document.querySelector('ul'); for(i=0;i<ul.children.length;i++){ ul.lastElementChild.remove(); } </script>
复制
1.复制所有当前元素及当前元素的子元素 DOM元素深复制 cloneNode(true)
2.仅复制当前元素及元素的属性，DOM元素浅复制 cloneNode(flase)
<button>按钮</button> <div id="a"> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> //无论是深复制还是浅复制元素 都有个缺点，id属性也会复制 后期需要累加更改 var div=document.querySelector('#a'); div.appendChild(div.cloneNode(true)); </script>
替换
父元素.repaliceChild(newNode，oldNode);
<button>按钮</button> <div id="a"> <ul> <li></li> <li></li> <li></li> </ul> </div> <script> //替换ul中第一个li节点元素 var btn=document.querySelector("ul"); var li=btn.firstElementChild; var p=document.createElement("p"); p.textContent="我把这家伙替换了"; //替换 btn.replaceChild(p,li); </script>
DOM常用属性
document.body:body元素
document.title:获取设置文档的标题
document.URL:获取完整的URL
document.domain:获取域名
获取节点上的属性
getAttrlbute()：获取节点上的属性
setAttribute()：属性，值)给节点创建一个新属性
removeAttribute(name)：删除一个几点上的属性
DOM元素有两个属性
一、标签属性
<div title="" id="" class="" min-date=""></div> 其中title id class 这些系统自带的的属性 min-date 是自定义的属性 命名不区分大小写，单词与单词之间用横杠连接。
标签属性不可以通过DOM对象方式获取自定义属性。
自定义标签属性通过属性获取器，来获取
二、对象属性
· 通过获取DOM的对象 增加一个属性 如：var div=document.getElementByTagName("div")[0]; div.a="中国"，这个a就是对象的属性
部分系统的标签属性和对象属性完全相同 id name type checked title src.....
注意 class属性在对象属性中是className
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
var btn=document.getElementsByTagName("button");
for(i=0;i<btn.length;i++){
btn[i].addEventListener("click",clickHandler);
//设置对象属性来存储i的值
btn[i].n=i;
}
function clickHandler(e){
//这里的this 就是被点击的btn 因为是btn调用的
this.textContent=this.textContent+this.n;
}
</script>
//获取 属性
<div data-min="abc"></div>
<script>
var data=document.querySelector("div");
console.log(data.getAttribute('data-min'));
</script>
设置属性
var data=document.querySelector("div"); console.log(data.getAttribute('data-min')); //abc data.setAttribute("data-min","123"); console.log(data.getAttribute('data-min')); //123
移除属性
data.removeAttribute("data-min");
console.log(data.getAttribute('data-min')); //null
