【面向JS--DOM 操作API】

选取元素

1、按HTML属性选取:

1、按id查找:
var elem=document.getElementByid("id");
返回一个元素对象。如果未找到，返回null
2、按标签名查找: 返回动态集合
var elems=parent.getElementsByTagName("tagName");
不但找直接子元素，而且还找所有子元素
3、按name属性查找:返回动态集合
var elems=document.getElementsByName("name");
4、按class属性查找:返回动态集合
var elems=parent.getElementsByClassName("class")
返回值: 返回动态集合(live collection)(类数组对象)
如果没找到，返回空数组[]

2、按选择器选取:

1、只查找一个符合条件的元素:
var elem=parent.querySelector("selector");
返回一个元素对象,如果没找到，返回null
2、查找所有符合条件的元素
var elems=parent.querySelectorAll("selector");
返回静态集合(static collection)，如果没找到,返回空集合[]

selector可写css中的所有选择器
强调：selectoe只需要参照parent向下写

getXXXByXXX vs querySelector

1.返回值：get返回动态集合，select返回静态集合
2.效率：getXXXByXXX的效率，比querySelector高的多
3.易用：querySelector比getXXXByXXX 使用更简洁

如果通过一个属性就可获得结果时，首选getXXX
必须通过复杂的查询才可获得结果时，首选querySelector

修改元素

修改分为改内容，改属性（标准属性，自定义属性），改样式（内联样式，样式表）

1、获取和修改元素的内容:

1、获取和修改原始的html内容:`<>`等转义字符，<a><p>等标签均原样输出
elem.innerHTML: 指代元素开始标签到结束标签之间的一切html原文。

2、 获取和修改纯文本的内容:不包含子元素的标签，自动转换特殊字符
elem.textContent: 指代元素开始标签到结束标签之间的文本正文。
IE8不兼容，使用: elem.innerText

2、获取和修改元素的属性:

1、标准属性: HTML标准中已经规定好的元素属性
核心DOM:
elem.attributes: 封装了所有属性节点的集合
elem.getAttribute("属性名"): 获得指定属性的值
elem.setAttribute("属性名","属性值"): 设置指定属性的值
elem.removeAttribute("属性名"): 移除属性
elem.hasAttribute("属性名"): 判断元素是否包含指定属性

HTML DOM:
elem.属性名
如果不包含指定属性，则返回""
如果给一个属性赋值为""，相当于移除了

2、自定义属性: 在元素开始标签中定义的自定义属性名的属性，只能使用核心DOM访问

特性 attribute vs 属性 property

attribute: 指出现在html元素开始标签中的标准属性
property: 内存中，对象上的保存一个数据的属性变量

HTML DOM将标准attribute，同样也封装为了内存中元素对象的property

HTML5中: 规定:
html中如何定义自定义属性: data-属性名="值"
js中如何定义自定义属性: elem.dataset.属性名="值"

如何访问: elem.dataset.属性名

3、获取或修改元素的样式: 使用 HTML DOM:

内联样式:
获取: elem.style.属性名
style: 封装所有CSS属性的CSSStyleDeclaration对象
js中CSS属性名都变为: 去横线改驼峰
问题: 只能获得内联样式
解决: 获得计算后的样式: 一个元素最终应用的所有样式，即包含内联样式，又包含样式表中的样式和浏览器的默认样式
var style=getComputedStyle(elem)
IE8: elem.currentStyle
var value=style.属性名

样式表:
找到要修改的属性所在的位置:
1、找到样式表: var sheet=document.styleSheets[i]
2、获得样式表中要修改的CSSRule对象:
var rule=sheet.cssRules[i]
3、获得CSSRule对象中的一个属性:
var value=rule.style.属性名
特殊: 动画的关键帧规则中：
rule.cssRules[i]获取每一帧的CSSRule对象

创建元素

三步：

1、创建空元素对象:

var elem=document.createElement("标签名")
相当于: <标签名></标签名>

2、为空元素添加关键属性

elem.属性名="值"
elem.innerHTML="内容"
相当于: <标签名 属性名="值">内容</标签名>

3、将新元素挂到DOM树中指定父元素下

追加: parent.appendChild(elem)
插入: parent.insertBefore(elem,现有元素)
替换: parent.replaceChild(elem,现有元素)

删除元素

parent.removeChild(elem)