详细介绍DOM操作（DOM查找，修改，添加）

一、什么是DOM

DOM(document object model)是W3C（万维网联盟）的标准，是中立与平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容、结构和样式。对网页进行增删改查操作。

万维网联盟：由很多国内外知名企业组成的组织。

二、DOM操作：

查找节点，读取节点信息，修改节点信息，创建新节点，删除节点

<script>
    getElementById();
    getElementByTagName();
    getElementByClassName();

    appendChild();
    removeChild();
    replaceChild();
    insertBefore();
    
    creatAttribute();
    creatElement();
    creatTextNode();
    getArttribute();
    setAttribute();
</script>

1、DOM查找

（1）按id属性精确查找一个元素对象

var elem=document.getElementById("id");
效率非常高
getElementById只能用在document 上只用与精确查找一个元素
不是所有元素都有id

​
<ul id="myList">
    <li id="m1">首页</li>
    <li id="m2">企业介绍</li>
    <li id="m3">联系我们</li>
</ul>

var ul=document.getElementById('myList');
console.log(ul);

​

(2)按标签名查找

var elems=parent.getElementByTagName("tag");
查找parent 节点下的所有标签为tag的子代节点
1、可以在任意父元素上
2、不仅查直接子节点，而且所有子代节点
3、返回一个动态集合即使只找到一个元素也返回集合，必须用[0]去除唯一元素

<ul id="myList">
    <li id="m1">首页</li>
    <li id="m2">企业介绍</li>
    <li id="m3">联系我们</li>
</ul>

var ul=document.getElementById('myList');
var list=ul.getElementsByTagName('li');
console.log(ul);

（3）

通过name 查找

document.getElementsByName('name属性值')
返回DOM树中具有指定name属性值的所有子元素集合

<form id="registerForm">
    <input type="checkbox" name="boy"/>
    <input type="checkbox" name="boy"/>
    <input type="checkbox" name="boy"/>
</form>
var list=document.getElementByName('boy');
console.log(typeof list);

（4）通过class 查找

var elems=parent.getElementsByClassName("class");
查找父元素下指定的class属性的元素（IE9+）

<div id="news">
    <p class="mainTitle">新闻标题1</p>
    <p class="subTitle">新闻标题2</p>
    <p class="mainTitle">新闻标题3</p>
</div>

var div="document.getElementById('news');
var list=div.getElementByClassName('mainTitle');
console.log(list);

（5）通过css选择器查找

元素选择器，类选择器，ID选择器，后代选择器，子代选择器，群组选择器

i1、只找一个元素：

1、只找一个元素：
var elem=parent.querySelector("select");
selector支持一切css选择器
如果选择器匹配有多个，则只返回第一个

2、找多个
var elems=parent.querySelectorAll("selector");
selector API 返回的是非动态集合

2、DOM修改

1、DOM标准

核心DOM:可以操作一切结构化文档的API包括HTML和XML，万能但是繁琐

HTML DOM:专门操作HTML文档的简化版DOM API仅对常用的复杂的API进行简化，不是万能但是简单。

核心DOM 4个操作

1、读取属性值（两种）
一、先获得属性节点对象在获得就节点对象的值。
var attrNode=elem.attributes[下标/属性名];
var attrNode=elem.getAttributeNode(属性名);
attrNode.value-属性值
二、直接获得属性值
var value=elem.getAttrbute("属性名");

2、修改属性
elem.setAttribute("属性名",value);

var h1=document.getElement.getElementById("a1");
h1.setAttributeNode("name",zhangji);

3、判断是否包含指定属性
var bool=elem.hasAttribute("属性名");
element.hasAttribute('属性名');//true或false
document.getElementById('bt1').hasAttribute('onclick');

4、移除属性
elem.removeAttribute("属性名");
<a id="alink" class="slink" href="javascript:void(0)"onclick="jump()">百度搜索</a>
var a=document.getElementById('alink');
a.removeAttribute('class');

3、DOM添加

 

分三步：创建空元素、设置关键属性、将元素添加到DOM树

1、创建新元素
var elem=document.createElement("元素名")

var table=document.createElement('table');
var tr=document.createElement('tr');
var td=document.createElement('td');

console.log(table);

2、设置关键属性
a.innerHTML="go to mooc"
a.hert="http://mooc.cn";
<a href="http//mooc.cn">go to mooc</a>
设置关键样式
a.style.opacity="1";
a.style.cssText="width:100px;height:100px";

3、将元素添加到DOM树中
parentNode.appendChild(childNode)
可以用于将一个父元素追加到最后一个子节点
var div=document.creatElement('div');
var txt=document.creatTextNode('版权声明')
div.appendChild(txt);
document.body.appendChild(div);

parentNode.insertBefore(newChild,exitingChild);
用于在父元素中的指定子节点之前添加一个新的子节点
<ul id="menu">
    <li>首页</li>
    <li>联系我们</li>
</ul>
var ul=document.getElementById('menu');
var newLi=document.creatElement('li');
ul.insertBefore(nesLi,ul.lastChild);

添加元素优化

尽量减少操作DOM树，因为每次修改DOM树都会导致重新layout

1、如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面

2、如果只添加多个平级子元素，则要将所有子元素临时添加到文档片段中，再讲文档片段整体添加到页面

文档片段：内存中，临时保存多个平级子元素的虚拟父元素用法和普通父元素一样

1、创建片段：
var frag=document.creatDocumentFragment();
2、将子元素临时追加到frag中
frag.appendChild(child);
3、将frag追加到页面
parent.appendChild(frag);
append之后，frag自动释放，不会占用元素