JavaScript.DOM

JavaScript------DOM

什么是DOM

1.document object model
…DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档内容、结构和样式。------对网页进行增删改查的操作 。

DOM查找（The DOM to find)

1.按ID属性，精准查找一个元素对象

var elme=document.getElementById("id") //效率非常高

eg. getElementById只能用在document上，用于精确查找一个元素，但不是所有的元素都有id
样例：
HTML:

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

JavaScript:

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

2.按标签名找

var elems=parent.getElementsByTagName("tag");//查找指定parent节点下的所有标签为tag的子代节点

eg.
1）可用在任意父元素上
2）不仅查直接子节点，而且查所有子代节点
3）返回一个动态集合，即使只找一个元素，也返回集合，必须用[0]取出唯一元素
4）不但找直接，而且找所有（问题）
样例：
HTML:

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

JavaScript:

var ul=document.getById('menulist');
var list=ul.getElementsByTagName('li');
console.log(list);

3.通过name属性查找

var elems=document.getElementsByName("name");//可以返回DOM树中具有name属性值的所有子元素集合

样例：
HTML：

<form id="registerForm">
		<input type="checkbox" name="boy"/>
		<input type="checkbox" name="boy"/>
		<input type="checkbox" name="boy"/>
</form>

var list=document.getElementsById('boy');
console.log(typeof list);

4.通过class查找

var elems=parent.getElementsByClassName("class");//查找父元素下指定class属性的元素，有兼容性问题：IE9+

样例：
HTML：

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

JavaScript:

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

5.通过CSS选择器查找
CSS选择器：元素选择器、类选择器、id选择器、后代选择器、子代选择器、群组选择器
5.1.只找一个元素：

var elme=parent.querySelector("selector");//selector支持一切CSS选择器，如果选择器配备的有多个，只返回第一个

5.2.找多个：

var elems=parent.querySelectorALL("selector");//selector API返回的是非动态集合

DOM修改

1.修改

DOM标准：

核心DOM

可操作一切结构化文档的API，包括HTML和XML。（万能！繁琐！）

HTML DOM

专门操作HTML文档的简化版DOM API，仅对常用的复杂的API进行了简化。（简单！）

2.核心DOM：四个操作

*1.读取属性值：
a.先获得属性节点对象，再获得节点对象的值：

var attrNode=elem.attributes[下表/属性名];
var attrNode=elem.getAttributeNode(属性名);

b.直接获得属性值:

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

*2.修改属性值：

var h1=document.getElementById("a1");
h1.setAttributeNode("name", value);//name属性确定要修改的值，value为修改后的值

*3.判断是否包含指定属性：

var boolean=elem.hasAttribute("属性名");//结果为布尔类型，true或false

document.getElementById('bt1').hasAttribute('onclick');

*4.移除属性：

elem.removeAttribute("属性名");

样例
HTML:

<a id="alink" class="slink" href="javascript:void(0)" onclick="jump()">百度搜索</a>

JavaScript:

var a=document.getElementById('alink');
a.removeAttribute('class');

3.修改样式

内联样式：elem.style.属性名
eg.属性名：去横线，变驼峰
样例：

css:background-color->backgroundColor
	list-style-type->listStyleType

DOM添加

添加元素步骤

1.创建空元素

var elem=document.creatElement("属性名");

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

console.log(table);

2.1.设置关键属性

a.innerHTML="go to tmooc";
a.href="http://tmooc.cn";
<a href="http://tmooc.cn">go to tmooc</a>

2.2.设置关键样式

a.style.opacity="1";
a.style.cssText="width: 100px; height: 100px";

3.将元素添加到DOM树

*1.

parentNode.appendChild(childNode);//可用于将为一个父元素追加最后一个子节点

var div=document.creatElement('div');
var txt=document.creatTextNode('版权声明');

div.appendChild(txt);
document.body.appendChild(div);

*2.

parentNode.insertBefore(newChild, existingChild);//用于在父元素中的指定节点之前添加一个新的子节点

HTML：

<ul id="menu">
		<li>首页</li>
		<li>联系我们</li>
</ul>

JavaScript:

var ul=document.getElementById('menu');
var newLi=document.creatElement('li');

ul.insertBefore(newLi, ul.lastChild);

添加元素优化

尽量少的操作DOM树

为什么：每次修改DOM树，都导致重新layout
1.如果同时创建父元素和子元素时，建议在内存中先将子元素添加到父元素，再将父元素一次性挂到页面
2.如果只添加多个平级子元素时，就要将所有子元素历史添加到文档片段中，再将文档片段整体添加到页面

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

如何：
*1.创建片段

var frag=document.creatDocumentFragment();

*2.将子元素临时追加到frag中

frag=appendChild(child);

*3.将frag追加到页面

parent.appendChild(frag);//强调：append之后，frag自动释放，不占用元素