【面向JS--DOM 操作API】

选取元素

1、按HTML属性选取:

1、按id查找:     var elem=document.getElementByid("id");    返回一个元素对象。如果未找到，返回null2、按标签名查找: 返回动态集合    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");     返回一个元素对象,如果没找到，返回null2、查找所有符合条件的元素     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内容:`&lt;&gt;`等转义字符，<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，同样也封装为了内存中元素对象的propertyHTML5中: 规定:  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)