首页 > 代码库 > DOM 2
DOM 2
1. ***查找
按选择器查找
2. 修改:
1. ***查找:
按选择器查找:
1. 如果只找一个:
var elem=parent.querySelector("selector");
2. 如果找多个:
var elems=parent.querySelectorAll("selector");
返回非动态集合(non-live collection):
实际存储完整数据，反复访问，也不用重新查找DOM树
优: 不会造成反复查找
鄙视题: getElementsXXXX vs querySelector
1. 返回值:
getElements返回动态集合:
优: 首次查找效率高
缺: 可能造成反复查找DOM树
querySelector返回非动态集合:
优: 包含完整属性，无需反复查找DOM树
缺: 首次查找效率低
2. 易用性:
querySelector更灵活, 且更简单
getElements每次只能查找一种结果，无法设置查找条件
更繁琐
总结: jQuery中:
如果一次查找就能找到元素时，首选getElements
如果查找条件复杂时，就用querySelector
2. 修改:
内容:
1. .innerHTML: 获取或设置元素开始标签到结束标签之间的html代码片段。
2. .textContent: 获取或设置元素开始标签到结束标签之间的纯文本内容。
2件事: 1. 去掉了html标签
2. 将转义字符转换为正文
何时: 如果希望去掉内容中的标签，仅获取文本内容时
.textContent有兼容性问题: IE8不兼容
IE8: .innerText
属性:
样式:
1. 修改:
属性:
样式:
1. 属性:
html标准属性:
核心DOM: 万能
1. 获取属性:
1. 获得属性节点对象: (了解)
var attrNode=elem.attributes[i/属性名];
elem.getAttributeNode("属性名");
attrNode.value
2. 直接获得属性值:
var value=http://www.mamicode.com/elem.getAttribute("属性名");
2. 设置属性:
elem.setAttribute("属性名",新值);
3. 判断是否包含指定属性:
var bool=elem.hasAttribute("属性名")
4. 移除属性:
elem.removeAttribute("属性名");
HTML DOM: 仅对部分的简化
elem.属性名
强调: html中的class属性和ES中的class属性冲突
html中的class要改名为className
特例: disabled selected checked
不能用核心DOM操作！只能用html DOM打点操作
attribute vs property
attribute指出现在开始标签中的属性
property保存在内存中的对象中的属性
核心DOM只能操作出现在页面上的attribute属性
无法操作未出现在页面上的内存中的property属性
HTML DOM可访问内存中的property属性
自定义属性: 2种:
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属性
内部/外部样式表:
补: .innerHTML只能获得封闭标签的内容
表单元素的值只能用.value
DOM 2