您的位置：首页 > Web前端 > HTML5

HTML5入门-2

2015-08-11 23:20 477 查看

HTML5中新API：

按类名查找元素：IE8不支持

var elems=

document/parentNode.getElementsByClassName("类名")

按选择器查找元素：IE8支持！

按照选择器查找符合条件的元素：

var firstElem=document.querySelector("CSS选择器");

var elems=document.querySelectorAll("CSS选择器");

原生API：底层实现！

vs 旧getxxxByXXX方法

旧getxxxByXXX方法：返回仅是实际元素对象的引用。还须返回树结构中遍历对象的属性。

selectors API：返回结果包含完整的元素对象和属性。不需要再返回树中遍历，即可访问元素的所有属性！

DEMO：二级菜单弹出

onmouseover: 鼠标进入元素边界时，*发生一次*！

onmouseout: 鼠标移出元素边界时，触发一次

DOM树的快速获得指定节点：

document.documentElement: 整个<html>的内容——了解

document.body：直接获得body元素！——重要

*爬树：

向上爬：parentNode：

向下爬：querySelectorAll:*

元素树：节点树去掉属性节点和文本节点后得到的只有元素组成的树。

            节点树       vs 元素树：

父节点       parentNode       parentElementNode

所有子节点   childNodes       children

第一个子节点 firstChild       firstElementChild

最后子节点   lastChild        lastElementChild

前一个兄弟   previousSibling previousElementSibling

后一个兄弟   nextSibling      nextElementSibling

动态创建节点：3步：

1. 创建空节点：

var newElem=document.createElement("标签名");

比如：var a=document.createElement("a");

     <a></a>

2. 设置节点对象必要属性：

比如：a.href="http://tmooc.cn";

a.innerHTML="tmooc";

     <a href="http://tmooc.cn">tmooc</a>

************************

*3. 将节点挂到指定父元素下*

//向父元素末尾追加新元素

parentNode.appendChild(newElem);

//在父元素中间，插入新元素

parentNode.insertBefore(newElem,后一个现有元素对象)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 API BOM DOM 节点树

相关文章推荐

新的分享

章节导航