DOM文档对象模型

DOM

全称Document Object Model  文档对象模型

• JS通过DOM来对HTML文档进行操作

1. 文档
   1. 表示的就是整个HTML网页文档
2. 对象
   1. 表示将网页的每个部分都转换为一个对象
3. 模型
   1. 使用模型来表示对象之前的关系,这样方便我们获取对象

节点(Node)

是构成HTML文档最基本的单元

四类:

1. 文档节点: 整个HTML文档
2. 元素节点: HTML文档中的HTML标签
3. 属性节点: 元素的属性
4. 文本节点: HTML标签的文本内容
5. 
6. 获取节点
   1. 浏览器已经为我们提供文档节点对象 ,这个对象是Window属性,可以在页面中直接使用,
   2. 文档节点代表的是整个网页
   3. document.getElementById()

事件

就是文档或浏览器窗口中发生的一些特定交互瞬间

1. JavaScript和HTML之间的交互式通过事件实现的
2. 代表性事件有: 点击某个元素, 将鼠标移动到某个元素上面

DOM查询

获取元素节点,通过document对象调用

1. getElementById() 通过id属性获取一个元素节点对象
2. getElementsByName 通过name属性获取一组元素节点对象
3. getElementsByTagName 通过标签名获取一组元素节点对象

通过具体元素节点调用

1. getElementsByTagName()    方法,返回当前节点的指定标签名后代节点
2. childNodes  属性,表示当前节点的所有子节点
3. firstChild     属性,表示当前节点的第一个子节点
4. lastChild    属性,表示当前节点的最后一个子节点
5. parentNode  属性,表示当前节点的父节点
6. previousSibling 属性,表示当前节点的前一个兄弟节点
7. nextSibling 属性,表示当前节点的后一个兄弟节点

其他查询方法:

1. document.body   获取body
2. document.documentElement   获取HTML
3. document.all  所有节点
4. document.getElementsByClasssName  根据class属性值查询一组节点对象,不支持IE8以下
5. document,querySelector()   根据一个选择器的字符串作为参数,可以根据一个css选择器来查询一个元素节点对象, 使用该方法只返回符合的第一个, IE8也可用
6. document,querySelectorAll() 该方法与document,querySelector() 用法一样,只是它会将 所有符合对象封装到一个数组里面

dom增删改

1. appendChild() 插入子节点
2. replaceChild()  替换节点

 

 修改样式

内联样式

语法: 元素.style.样式名 = 样式值

1. 如果CSS样式名含有-, 要改成驼峰命名法,如:   background-color 要改成: backgroundColor
2. 我们通过style修改的属性设置的样式都是内联样式,因为具有较高优先级,所以修改后往往会立即显示,
3. 但是,如果样式中写有!important,则样式会有最高优先级,修改样式不会覆盖
4. 通过style只是读取内联样式,样式表中的读取不到

获取当前显示的样式

语法: 元素.currentStyle.样式名

1. 只是IE浏览器支持,其他浏览器不支持

语法:getComputedStyle()

1. 这个方法来获取元素的当前样式,这个是Windows的方法,直接使用
2. 需要两个参数:
   1. 第一个,需要获取样式的元素
   2. 第二个,可以传递一个伪元素,一般都传null
3. 该方法获取的是一个对象,封装了所有的样式
4. 可以通过   对象.样式名  来读取样式
5. 如果样式没有设置,获取到的是真实值而不是默认值(比如width获取的是真实数值,而不是auto)
6. IE8以下不支持

样式属性其他方法:(这些是只读的,不能用于修改样式)

 

1. clientWidth /clientHeight 获取元素可见宽度/高度,包括内容区和内边距
   1.  这两个属性都是不带px的,返回的是数字,可以直接进行计算
2. offsetWidth/offserHeight 获取元素的整个宽度和高度,包括内容区,内边距,和边框
3. offsetParent 获取当前元素的最近的定位父元素
4. offsetLeft/offsetTop   当前元素相对于其定位父元素的水平/垂直偏移量
5. scrollWidth/scrollHeight  获取元素整个滚动区域的宽度/高度
6. scrollLeft/scrollTop 可以获取水平/垂直滚动条的滚动距离

 

<script type="text/javascript">
//哪个元素
//哪个样式
 
function getStyle(obj, attr)
{
 if(obj.currentStyle)
 {
  return obj.currentStyle[attr];
 }
 else
 {
  return getComputedStyle(obj, false)[attr];
 }
}
 
window.onload=function ()
{
 var oDiv=document.getElementById('div1');
  
 alert(getStyle(oDiv, 'backgroundColor'));
}
</script>

//获取样式简洁版
function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}