Dom修改、添加和删除

修改

修改内容

elem.innerHTML 获取或修改指定元素标签内的 html内容，包含HTML标签
innerText 获取或修改指定元素标签内的文本值，不包含HTML标签(elem.textContent也可实现，但是有兼容问题)
elem.value 获取或修改表单元素的值

修改属性

HTML DOM与核心(Core)DOM的区别

核心DOM(万能，但繁琐)

1.获取属性值(两种方法)
第一种

// var attrNode=elem.attributes["属性名"];
var attrNode=elem.getAttributeNode("属性名");
attrNode.value //获得属性节点后取得属性值

第二种,直接获得属性值

var value=elem.getAttribute('属性名');

2.设置属性值

elem.setAttribute('属性名',属性值);

3.移除属性

elem.removeAttribute("属性名");

4.判断是否包含指定属性

elem.hasAttribute("属性名");

HTML DOM

HTML DOM将所有HTML标准属性，已经提前封装在了元素对象中,可用.访问，元素对象的属性和普通对象的属性用法完全相同，比如elem.属性名=值

状态属性: disabled 、selected、checked的值是bool类型，只能用HTML DOM操作，不能用核心DOM操作

自定义属性的设置活着获取有两种方式，一是核心DOM，二是HTML5的方法elem.dataset.属性名

修改样式

内联样式

可通过elem.style.css属性名=值来获取或设置，优先级最高。使用时所有css属性要去横线变驼峰， 比如: z-index => zIndex、font-size => fontSize、background-color => backgroundColor

计算后的样式

一个元素的完整样式，可能来源自多个地方，想要获取最终应用到当前元素上的所有样式的合集，那么就要获得计算后的样式，如何获取：
1.获得计算后的style对象

var
style=getComputedStyle(elem);

2.获得style中的css属性值

var value=style.css属性名;

样式表中的样式(了解)

样式表对象模型：COM

1.每个样式表都是一个sheet对象：

var sheet=document.styleSheets[i];

2.每个选择器后的{…}，就是一个CSSRule对象

var cssRule=sheet.cssRules[i];

3.访问每个cssRule中的一个样式属性

cssRule.style.css属性

添加和删除

添加元素

1.创建空元素

var a=document.createElement("a");
// 相当于`<a></a>`

2.设置关键属性:

a.href="https://www.baidu.com/";
a.innerHTML="go to baidu";
// 相当于 <a href=https://www.baidu.com/'>go to baidu</a>

3.将新元素添加到指定父元素下

末尾追加: parent.appendChild(a)
中间插入:parent.insertBefore(a, child) 将a插入到child之前
替换: parent.replaceChild(a,child) 用a替换child

每次操作DOM树都会导致重新layout,所以应尽量减少操作DOM树的次数：

1.如果需要同时添加父元素和子元素，应先创建父元素，将子元素添加到父元素，最后将父元素整体添加到页面
2.如果父元素已经在页面上，而需要同时添加多个同级子元素素时，应使用文档片段(内存中，临时存储多个子节点的虚拟父节点),先将子节点放在文档片段中，再将文档片段整体挂到页面上。
首先创建文档片段对象

var frag=document.createDocumentFragment();

先将子元素添加到文档片段中

frag.appendChild(child)

最后将文档片段一次性添加到DOM树指定父元素下

parent.appendChild(frag)

文档片段不会成为页面上的元素，添加后自动释放。

删除元素

parent.removeChild(child);

child.parentNode.removeChild(child);