DOM:
1. 初学DOM主要是一些操作标签的增删改查方法,最主要的就是查:
1. 查的重点在于要会写选择器:
a) 选择器:
1. 兄弟选择器
a) 选择器1+选择器2{}--------------à相邻兄弟
b) 选择器1~选择器2{}--------------à某元素后面的所有兄弟
2. 属性选择器
a) 元素[属性=值]
b) 元素[class~=值]
c) 元素[属性^=值]
d) 元素[属性$=值]
e) 元素[属性*=值]
3. 伪类选择器
a) 目标伪类::target 匹配当前页面中活动的HTML锚元素
b) 元素状态伪类:
i. :enabled 匹配每个已启用元素(表单控件)
ii. :disabled 匹配每个已禁用元素(表单控件)
iii. :checked 匹配每个被选中的元素(radio,checkbox)
c) 结构伪类
i. :first-child 属于父元素的首个子元素
ii. :last-child 属于父元素中的最后一个子元素
iii. :nth-child 属于其父元素的第n个子元素
iv. :empty 匹配没有子元素(包含文本)的每个元素
v. only-child 匹配属于其父元素中的唯一子元素
d) 否定伪类
i. :not(选择器) 将满足选择器的元素从指定范围中排除
4. 伪元素选择器
a) :first-letter 首字符
b) :first-line 首行
c) :selection 用户选取
d) :before 某元素的内容区域之前
e) :after 某元素的内容区域之后
2.接下来要谨记:
document对象:整棵树的根节点
Node对象是document的子代节点
节点类型nodeType | document | element | attribute | text |
节点名nodeName | #document | 标签名 | 属性名 | #text |
节点值nodeValue | Null | Null | 属性值 | 文本内容 |
| 节点树 | 元素树 | ||
父子关系 | elem.parentNode | 返回一个父节点对象 | elem.parentElement | 返回一个父元素对象 |
elem.childNodes | 返回子节点对象的集合 | elem.children | 返回子元素对象的集合 | |
elem.firstChild | 返回第一个子节点对象 | elem.firstElementChild | 返回第一个子元素对象 | |
elem.lastChild | 返回最后一个子节点对象 | Elem.lastElementChild | 返回最后一个子元素对象 | |
兄弟关系 | elem.previousSibling | 返回当前节点的前一个兄弟节点 | Elem.previousElementSibling | 返回当前节点的前一个兄弟元素 |
elem.nextSibling | 返回当前节点的下个兄弟节点 | Elem.nextElementSibling | 返回当前节点的下个兄弟元素 |
3.还有两个比较重要的查找节点方法:
var elem=document.getElementById(“id”);
var elem=parent.getElementsByTagName(“标签名”);返回的是所有子节点集合
4.选择器查找节点:
var elem=parent.querySelector(“选择器”);
var elems=parent.querySelectorAll(“选择器”); 返回的是非动态集合,缺点:首次比较慢。优点:无需反复查找DOM树
5.动态集合和非动态集合区别:
elem.childNodes、elem.children à动态集合:
缺点:可能造成反复查找DOM树。
优点:首次查找效率高。
不实际储存元素和属性值每次访问集合都需要重新查找DOM树。
遍历动态结合:
错误: for(var i=0;i<children.length;i++)
后果,循环了几次,就重复查找了几次DOM树
解决: for(var i=0,len=children.length; i<len; i++)
仅在循环开始时查找一次DOM树,将值另存为在len中
6.遍历:
递归遍历: 查找指定父节点下所有子代节点——鄙视题 手写
如何: 2步:
1. 先遍历所有直接子节点
2. 在遍历直接子节点时,对每个子节点调用和父节点完全相同的方法。
算法: 深度优先遍历: 每次都优先遍历子节点,所有子节点遍历完,才返回遍历兄弟节点
递归的效率: 极低。
解决: 绝大多数递归都可用循环代替
遍历API: 每次仅遍历下一个节点,可用循环反复执行(了解)
1. 节点迭代器:
如何: 2步:
1. 创建迭代器对象:
var iterator=
document.createNodeIterator(parent,NodeFilter.SHOW_ALL,null,false.SHOW_ELEMENT);
2. var 原先的节点对象=iterator.nextNode(); 跳到下一个节点
如果返回null,说明到头了
内置的就是深度优先遍历算法。
总结: jQuery中:
如果一次查找就能找到元素时,首选getElements
如果查找条件复杂时,就用querySelector
其次就是修改:
查找到元素节点对象后,可以用以下两种属性进行修改:
1 .innerHTML: 获取或设置元素开始标签到结束标签之间的html代码片段。
2 .textContent: 获取或设置元素开始标签到结束标签之间的纯文本内容。IE8: .innerText
查找一个标签元素的属性:
1.获得属性节点对象: (了解)
var attrNode=elem.attributes[i/属性名];
elem.getAttributeNode("属性名");
attrNode.value
2. 直接获得属性值:
var value=elem.getAttribute("属性名");
2. 设置属性:
elem.setAttribute("属性名",新值);
3. 判断是否包含指定属性:
var bool=elem.hasAttribute("属性名")
4. 移除属性:
elem.removeAttribute("属性名");
自定义属性:
1. 只能用核心DOM访问,不能用html访问
2. HTML5: ——兼容问题
所有自定义属性: 属性名必须: data-属性名
访问时: elem.dataset.属性名
何时: 1. 在客户端网页中临时缓存部分业务数据
2. 代替id和class作为查找元素的条件
2. 样式:
内联: elem.style.css属性名
强调: 所有css属性都要去横线变驼峰
background-color -> backgroundColor
list-style-type -> listStyleType
问题1: 只能获得/设置内联样式
无法获取最终应用到元素上的完整样式
解决:
如果设置一个元素的样式: elem.style.css属性名
因为: 优先级最高!不影响其他元素
如果获取一个元素的样式: 不用style
getComputedStyle(elem).css属性名
问题2: elem.style.css属性名一句话只能设置一个样式
如果需要同时设置一个元素的多个css属性,代码繁琐
解决: 今后只要操作一个元素的样式,都用class属性批量操作
特例: 精确控制动画效果时,需要操作单个css属性
1. 添加/删除元素:
添加: 3步:
1. 创建新的空元素:
var a=document.createElement("a");
相当于: <a></a>
2. 设置元素的关键属性:
a.href="http://tmooc.cn"
a.innerHTML="go to tmooc";
相当于: <a href="http://tmooc.cn">go to tmooc</a>
3. 将元素添加到DOM树上:
3种:
1. 末尾追加: parent.appendChild(a)
2. 插入在一个现有元素之前:
parent.insertBefore(a,oldElem)
3. 替换现有元素: parent.replaceChild(a,oldElem)
多个平级元素添加:
何时: 如果同时添加多个平级元素时,都要先将平级元素添加到文档片段中。再将文档片段一次性添加到DOM树
如何:
1. 创建文档片段:
var frag=document.createDocumentFragment();
2. 将子元素添加到frag中: frag.appendChild(child)
3. 将frag添加到DOM树: parent.appendChild(frag)
frag将子元素添加到DOM树后,自动释放。
删除元素: 1. 先找到要删除的元素对象elem
2. parent.removeChild(elem)
elem.parentNode.removeChild(elem);