DOM对象

4人阅读 评论(0) 收藏 举报
分类:

 

   基本概念

    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工具包中

 

 

查看评论

JavaScript DOM编程

-
  • 1970年01月01日 08:00

DOM对象DOM对象DOM对象.doc

  • 2010年08月27日 15:59
  • 79KB
  • 下载

JavaScript之DOM对象和内置对象

1. window 和document 对象 浏览器每次加载和显示页面时,都在内存里创建页面及其全部元素的一个内部表示体系,也就是DOM。在DOM 里,页面的元素具有一个逻辑化、层级化的结构,就像一个...
  • cighao
  • cighao
  • 2015-10-22 21:47:04
  • 1084

JS操作dom对象的入门(比较系统全面)

一、什么是DOM?    什么叫DOM,DOM是文档对象模型(Document Object Model,是基于浏览器编程(在本教程中,可以说就是DHTML编程)的一套API接口,W3C出台的推荐标准...
  • mcy478643968
  • mcy478643968
  • 2010-10-18 16:30:00
  • 8137

DOM对象-节点的操作

上篇整理的是dom对象的一些基本知识,好久也没来写博客了,以后一定要养成习惯啊啊~~ 废话少说,直接进入正题,这次整理的是dom对象节点的操作,可以通过操作dom节点对html进行修改等、 ...
  • a920119797
  • a920119797
  • 2017-03-19 23:10:21
  • 426

dom对象和jquery对象的区别

在开发前台页面的时候,如果要想把页面做的交互性高一些,需要写大量的js代码和css样式.        在js中,获取对象,可以通过 document.getElementById 或 docum...
  • zc474235918
  • zc474235918
  • 2015-12-20 08:14:07
  • 1640

jQuery对象与DOM对象区别和关联

1,jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方...
  • Practicer2015
  • Practicer2015
  • 2015-04-11 10:52:16
  • 2095

JavaScript中的BOM和DOM和常用对象

 BOM和DOM关系图 与BOM相关的一些对象   window对象:整个BOM的核心,在浏览器中打开网页时,首先看到的是浏览器的窗口,即顶层的window对象。调用window对象的方法...
  • qq1207501666
  • qq1207501666
  • 2014-05-14 12:45:07
  • 1317

Dom对象的常用方法

Dom对象的常用方法: (1)getElementById() 查询给定ID属性值的元素,返回该元素的元素节点 1、  查询给定ID属性值的元素,返回该元素的元素节点。也称为元素对象。       ...
  • u011225629
  • u011225629
  • 2016-03-18 10:51:00
  • 2804

DOM模型中的常用对象及其方法?

1)   document对象的常用方法:   write()   getElementById()   getElementByName()   getElementByTagName() ...
  • Puzzle_48hcy
  • Puzzle_48hcy
  • 2017-05-27 08:04:18
  • 350
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 655
    排名: 7万+
    最新评论