- DOM:
- Document Object Model (文档对象模型)
DOM 节点:
节点和节点层次的概念?
节点: 页面中的所有内容都是节点: 包括标签, 声明, 注释, 文字, 脚本等...
节点层次: 节点之间的关系就是节点的层次
在 JS 中称为 node.
获取元素节点的方法:
获取单一节点对象:
document.getElementById()
--> 获取带有指定 id 的元素
document.querySelector()
--> 通过 CSS 选择器获取相应元素 -- 注意: IE8 及以下浏览器不支持
获取一类节点对象, 得到一个类数组对象:
document.getElementsByName()
--> 获取带有指定 name 属性值的元素
document.getElementsByTagName()
--> 获取带有指定标签名的元素
document.getElementsByClassName()
--> 获取带有指定类名的元素 -- 注意: IE8 及以下浏览器不支持
document.querySelectorAll()
--> 通过 CSS 选择器获取相应元素 -- 注意: IE8 及以下浏览器不支持
注意: 以上传入的都是字符串
节点的属性:
nodeName 节点名称属性
返回的大写标签名
nodeType 节点类型值
返回的是一个数字
元素节点: 1
属性节点: 2
文本节点: 3
文档节点: 9
nodeValue 节点值
返回的是节点的值, 元素节点的值永远都是 null
通过元素节点获取属性:
1. 可以通过节点来获取元素身上的属性: 元素节点. 属性名
2. class 属性比较特殊, 因为它是关键字, 所以需要写成 className 来获取
3. 注意: CSS 的样式名在 JS 中全都要转换为驼峰式命名法, 如: font-size 在 JS 中写成 fontSize;
4. style 属性也比较特殊, 它得到的是一个样式集合对象, 里面包含了 CSS 你能设置的所有样式, 不管你设没设置
想获取某个样式可以继续以对象属性的方法获取: 元素节点. style.width;
还可以通过这种方法来修改样式: 元素节点. style.width = "100px"; 注意要写字符串
如果修改的样式很多, 还可以通过行内样式的方法:
元素节点. style = "width:100px;height:100px;font-size:26px;";
注意: 这种写法用的还是原 CSS 写法, 不使用驼峰命名法;
来源: http://www.jianshu.com/p/0ec0e55a9130