16-0908 am day 02
1. ***查找:
1. 利用节点间关系查找周围的元素(查看上一篇)
2. 用HTML属性查找:
按id:
var elem=document.getElementById("id");
只能找到一个元素,如果没找到,返回null。 强调: 必须用document调用。
按标签名:
var elems=parent.getElementsByTabName("标签名");
在指定父元素parent下查找指定标签名的元素,返回live collection。标签名可以大写，也可以小写。强调: 查找所有子代节点
按name:
var elems=parent.getElementsByName("name");
在指定父元素parent下查找指定name属性的元素,返回live collection。只有表单元素才有name属性，使用的少，作为了解。
按class:
var elems=parent.getElementsByClassName("class");
在指定父元素parent下查找指定class属性的元素,返回live collection
注：如果getElementsXXX没找到，返回空集合[]
3. 用选择器查找:
1. 只查找一个符合选择器要求的元素:
var elem=parent.querySelector("selector");
如果没找到，返回null，只返回第一个符合条件的。
#######2. 查找多个符合选择器要求的元素:
var elem=parent.querySelectorAll("selector");
如果没找到，返回空集合[]。强调: 返回no-live collection(非动态集合):包含完整属性的集合，反复访问不会导致重复查找DOM树
鄙视题: getXXX VS querySelector
1. 执行效率:
如果通过一个属性即可找到的元素
getXXX更快 返回live collection
querySelector 更慢 no-live collection
2. 代码量:
如果需要通过多次查找才能获得想要的元素时
querySelector 更简单
getXXX 繁琐
4. VIP通道:
document.body
document.head
document.documentElement : html
16-0908pm day02
修改BOM:
内容:
属性: 标准、自定义
样式: 内联样式、内/外部样式表
1. 修改内容:
elem.innerHTML: 元素开始标签到结束标签之间的html内容，如果里面有标签的话会直接显示出来。
elem.textContent: 元素开始标签到结束标签之间的文本内容（去掉html标签）
IE8.innerText
练习技巧: 如果遍历过程中会删除数组的元素，则要从后向前反向遍历。
2. 访问或操作元素的属性:
2.1标准属性:
2.1.1核心DOM: 万能
- 访问属性节点对象:
var node=elem.attributes[i/"属性名"];
var node=elem.getAttributeNode("属性名");
node.value->获得属性值
i指的是数组下标，
- 获得属性值:
var value=elem.getAttribute("属性名");
- 修改属性值:
elem.setAttribute("属性名","值");
- 移除属性:
elem.removeAttribute("属性名");
- 判断是否包含指定属性:
var bool=elem.hasAttribute("属性名");
2.1.2HTML DOM: 将html标准属性封装到了元素对象中
elem.属性名
问题: 仅能访问HTML标准属性
2.2自定义属性:
2.2.1核心DOM: 万能
2.2.2HTML5 规定:
1, 定义自定义属性时: data-属性名="值"
2, 读取自定义属性: elem.dataset.属性名
property VS attribute
显式写在开始标签中的: attribute
强调: getAttribute只能获得在页面上显式定义的属性值
在内存中对象里保存的: property
标准属性: 既是property也是attribute
自定义属性: 只是attribute
input type="checkbox" 要获得选中状态checked
不能用getAttribute，一定要用elem.checked
16-0909-am day 03
3. 修改样式:
3.1访问内联样式:
3.1.1修改样式: elem.style.css属性名
3.1.2获取样式:
问题: 仅能访问内联样式
解决: var style=getComputedStyle(elem)
style.css属性名 ——只读
其中,css属性名都要去横线，变驼峰:
比如: background-color: backgroundColor
list-style-type: listStyleType
问题: 一条语句只能修改一个样式
解决: 将一套样式，放入class，用程序操作class
课堂练习:
获得焦点onfocus: 元素从不可操作到可操作的状态变化
失去焦点onblur: 元素从可操作变回不可操作的变化
3.2修改内/外部样式表中的属性:
3.2.1. 获得样式表对象: var sheet=document.styleSheets[i]
3.2.2. 获得cssRule对象: var rule=sheet.cssRules[i];
特殊: rule是一个keyframes:var subRule=rule.cssRules[i]
3.2.3. 修改cssRule中的属性: rule.style.css属性名=值
Chrome: 不允许sheet对象访问本地的css样式表
