JavaScript基础学习之WebAPIs-DOM

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

API与WebAPI的总结：

 DOM

文档对象模型(Document Object Model，简称DOM)，是处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

getElementById获取元素   

document.getElementById('xxx');     返回的是一个元素对象，参数是大小写敏感的字符串

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合，伪数组的形式。

document.getElementsByTagName('标签名');

因为获取的是元素对象集合，需要遍历来获取某个元素对象。

根据类名获取

document.getElementsByClassName(' ');

时间三要素

1、事件源      事件被触发的对象    谁

2、事件类型      如何触发     如点击

3、事件处理程序    通过一个函数赋值的方式完成

innerText、innerHTML可以改变元素内容（普通盒子的内容，如div等）   但是innerHTML可以识别标识符，是更标准的写法

通过js修改元素样式   element.style.样式名      样式名采用驼峰命名法。

js修改style样式操作，产生的是行内样式，css权重较高。

element.className='某个元素类名';    可以通过某个事件修改元素的样式类名来修改元素样式。（会覆盖原来的类名）；如果要保留原来的类名样式，可以通过多类名来修改  '类名1 类名2'  。

 排他思想

如果有一组元素，我们想要其中某一个元素修改样式，要先清空其他元素的该样式，再修改当前元素的样式。

鼠标事件记录：onmouseover(鼠标经过)     onmouseout（鼠标离开）    onfocus(事件在对象获得焦点【光标】时发生)     onblur(对象失去焦点)

获取元素的方法：1.element.属性   【获得元素本身属性】

 2、element.getAttribute('属性')   【获得自定义属性】   在H5中，自定义属性data-开头作为属性名并赋值。

但该方法存在兼容性问题，还是使用getAttribute居多

 

节点获取元素 

子节点

        childNodes是所有子节点，包含元素节点、文本节点等；children，获取所有子元素节点

兄弟节点

        node.nextElementSibling   下一个兄弟节点

        node.previousElementSibling    上一个兄弟节点

创建节点

        document.createElement(' tagName')

        创建了之后要添加到父结点中   

        node.appendChild(child)      将child节点添加到node的子元素的后面

        node.insertBefore(child, 指定元素)    将指定元素添加到指定元素前

删除节点 

        node.removeChild(child)

克隆节点

        node.cloneNode()    //括号为空或false，浅拷贝， 只复制标签，不复制内容

        node.cloneNode(true)    //深拷贝，复制标签和内容

        克隆结点之后需要添加到到某个位置，同上。

*****阻止链接跳转需要在href=中添加javascript:void(0);  或者javascript:; 

三种动态创建元素区别