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