基础篇(五)-JS-DOM

Posted by Suzeyu on 2016-04-14

自学小笔记

DOM Document Object Model 文档对象模型

DOM主要提供了访问和操作HTML标记的方式。

HTML标记:图片标记、表格标记、表单标记、body、等。

BOMDOM不是js的内容。他们是W3C指点的规范。但是,BOMDOM在浏览器中以对象的形式得以实现。

BOMDOM都是由一组对象构成。

W3C是制作互联网标准的一个国际化的组织,如XHTMLCSSJavaScriptAJAX等。

DOM的官方定义

DOM ,Document Object Model,文档对象模型。我们可以把网页中的所有元素看成是对象。

DOMW3C指定的网页标准或准则,而这个标准,在浏览器中,以 对象 的形式得以实现。

DOM的官方定义: DOM可以使用脚本,动态的访问或操作,网页的内容、网页外观、网页结构。

DOM的分类

  • 核心DOM:提供了同时操作HTML文档和XML文档的公共的属性和方法。
  • HTML DOM: 针对HTML文档提供的专用的属性方法。
  • XML DOM: 针对XML文档提供的专用的属性和方法。
  • CSS DOM: 提供了操作CSS的属性和方法。
  • EventDOM: 时间对象模型。如:onclickonload等。

HTML节点树

节点关系

根节点,一个HTML文档只有一个根,他就是HTML节点。

子节点,某一个节点的下级节点。

父节点:某一个节点的上级节点。

兄弟节点: 同属于一个父节点。

DOM中节点类型

document文档节点,代表整个网页,不代表任何HTML标记。但他是html节点的父节点。

element父元素节点,指任何HTML标记,每一个HTMl标记就称为一个元素节点。它可以有文本节点和属性节点。

attribute属性节点。值HTML标记的属性。

text节点。是节点树的最底层节点。

核心DOM中的公共的属性和方法

提示: 核心DOM中查找节点(标记), 都是从根节点开始的(html节点)。

1.节点访问

  • nodeName:节点名称。
  • nodeValue:节点的值。只有文本节点才有值,元素节点没有值。只能添加纯文本,不能设置css样式等。
  • firstChild:第一个子节点。
  • lastChild:最后一个子节点。
  • childNodes:子节点列表,是一个数组。
  • parentNode: 父节点。

查找<html>标记的方法

  • document.firstChild
  • document.documentElement.client

查找标记的方法

  • document.firstChild.lastChild
  • document.body

为什么document.body.firstCHild找不到<table>节点? 核心DOM的属性和方法,主要是针对HTML4.0开发的。 在Firefox下,会把空格或换行,当成文本节点。 HTML4.0是没有DTD类型定义的。

2.节点的属性操作

  • setAttribute(name,value):给某个节点添加属性。
  • getAttribute(name):获取某个节点属性的值。
  • removeAttribute(name):删除某个节点的属性。

3.节点的创建

  • createElement(tagName):创建一个指定的HTML标记。tagname:不带尖括号的标记名。
  • appendChild(elementObj): 将创建的节点,追加到某个父节点下。
  • removeChild(elementObj):删除节点

HTML DOM简介和新特性

1.简介
如果在核心DOM中,网页节点层级很深时,访问这个节点时将会十分的麻烦。那么HTMLDOM重就提供了通过id直接找到节点的方法,而不用再HTML根节点开始。

HTMLDOM的新特性

  • 每一个HTML标记,都队形一个元素对象。
  • 每一个HTML标记的属性,与对应的元素对象的属性,–对应。

HTML DOM访问HTML元素的方法

1.getElementById()

  • 查找网页中指定id的元素对象。
  • var obj = document.getElementById(id)
  • id是指网页中标记的id属性的值。
  • 返回一个元素对象。

2.getElementsByTagName(tagName)

  • 查找指定的HTML标记,返回一个数组。
  • var arrObj = parentNode.getElementsByTagName(tagName)
  • tagName是要查找的标记形成,不带尖括号。
  • 返回一个数组。如果只要一个节点,也返回一个数组。
    元素的属性
名称 说明
tagName 标签名称,与核心DOM中nodeName一样
className css类的名称
id 同HTML标记id属性一样
title 同HTML标记title属性一样
style 同HTML标记style属性一样
innerHTML 包含HTML标记中的所有的内容,包括HTML标记等。比nodeValue强大
offsetWidth 元素对象的可见宽度,不带px
offsetHeight 元素对象的可见高度,不带px
scrollHeight 元素对象的总高度,包括滚动条内容,不带px
scrollWidth 元素对象的总宽度,不带px
scrollTop 指内容向上滚动上去了多少距离(有滚动条才有效),不带px
scrollLeft 指内容向左滚动上去了多少距离(有滚动条才有效),不带px

onscroll:当拖动滚动条的时候触发。

CSS DOM动态样式

使用JS操作CSS中的个属性。JS只能操作或者修改行内样式。对于类样式,通过className来赋值。

style对象

每个HTML标记,都有一个style属性。但这个style属性又是一个style对象。

style对象的属性,与CSS中的属性,一一对应。所有style对象用来代替CSS

如: imagObj.style.border = "1px solid red";

style对象属性与CSS属性的转换

1.如果是一个单词,style对象属性,与CSS属性一样。

2.如果是多个单词,第一个单词全小写,后面每个单词首字母大写,并去掉中划线。

  • divObj.style.backgroundColor = "red";
  • divObj.style.backgroundImage = "url(images/bg.gif)";
  • divObj.style.fontSize = "18px";

Event DOM : 事件DOM

事件简介

时间主要实现“用户与网页的交互”。

当事件发生时,去执行JS功能代码。

常用事件

  • onload:当网页加载完成时。
  • onclick:当点击时,所有标记都适用。
  • onscrool:当拖动滚动条时。
  • onmouseover:当鼠标放上时。
  • onmouseout:当鼠标移开时。
  • onsubmit:当提交表单时。
  • onreset:当重置表单时。
  • onfocus:当获得焦点时,把光标定位到文本框中。
  • onblur:当失去焦点时,把光标从文本框中移开。
  • onchange:当下拉列表内容改变时。用在下拉列表,上传文件。
  • onselect:当选中文本时
  • onresize:当改变窗口大小事,发生的事件。
  • ….

3.事件句柄属性

HTML标记,都有相应的事件属性。
每一个HTML标记,都对应一个元素对象。元素对象也具有相应的事件属性。但是匀速对象的事件属性应该全是小写

事件属性后面调用的一般是JS函数,通过JS函数来完成相应的功能。

Event对象简介

当事件发生时,向调用函数,传递一个event参数,这个event参数是一个事件对象。

event对象中记录了当前事件发生的环境信息。如:单击时的坐标,事件类型等。

注意这个event对象是短暂存在的,新的时间发生,新的event对象产生,原来的event对象消失。

DOM中的Event对象

DOM中引入Event对象(DOM浏览器就是标准浏览器)

1.通过HTML标记的时间属性来传递event对象。

DOM中,event对象是作为时间调用函数时的参数,传递给给函数。

event参数,是系统固定写法,全小写,不能加引号,他就是event对象参数。

2.DOM中Event对象属性

  • type:当前的时间类型。
  • clientXclientY:距离窗口左边和上边的距离。
  • pageXpageY:距离网页左边和上边的距离。
  • screenXscreenY:距离屏幕左边和上边的距离。

IE中的event对象

IE中的event对象,是window对象的一个属性,可以通过window对象调用,而不需要传值。如:window.event.

IE中Event对象属性。

typeclientXclentYxyscreenXscreenY。同上。

简易购物车

随机生成小图片