DOM对象

 

   基本概念

    DOM

DOM Document Object Model 文档对象模型

就是把HTML文档模型化,当作对象来处理

DOM提供的一系列属性和方法可以视作一个工具箱,极大地方便了我们对文档的处理。

    内容概念

文档(Document):就是指HTML或者XML文件

节点(Node):HTML文档中的所有内容都可以称之为节点,常见的节点有

元素节点 属性节点 文本节点 注释节点

元素(Element):HTML文档中的标签可以称为元素

     结构概念

父节点 当前节点的父级

子节点 当前节点的子级

兄弟节点 和当前节点同属一个父级的节点

    获取元素

getElementById

通过id寻找一个元素(找到的是一个元素对象)该方法只能被document对象调用(同一个文档中id不能重复)

getElementsByTagName

通过标签名寻找一类元素(找到的是由元素对象组成的伪数组)

即可以被document调用,又可以被元素对象调用,被元素对象调用时表示在该元素对象内部执行查找

   设置属性

元素对象.属性名 = “属性值”;

等价于

<标签 属性名=”属性值”>

   绑定事件

事件三要素

    事件源.事件 = function(){ 事件处理程序 }

    等价于

    <标签 事件=”事件处理程序”>

 

和对象方法一样,this指的还是调用该方法的对象

    常用属性

    常用标签属性

DOM对象的属性和HTML的标签属性几乎是一致的,常用的有src、title、className、href和style

其中className对应就是标签的class属性,但是由于class在JS中是关键字,所以变成了className

     内部文本属性

innerHTML

    获取和设置标签中的内容,设置的内容会当作节点对象被解析到DOM树上

innerText

    获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题)

innerContent

    获取和设置标签中的内容,设置的内容会被当作普通文本(有兼容性问题)

可以通过能力检测封装一个自己的设置内部文本的方法并放到自己的JS工具包中

 

 

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页