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写法,不使用驼峰命名法;
