基础篇(五)-JS-DOM

su 收录于 JavaScript 入门

2016-04-14 约 2961 字预计阅读 6 分钟次阅读

自学小笔记

DOM Document Object Model 文档对象模型

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

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

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

BOM和DOM都是由一组对象构成。

W3C是制作互联网标准的一个国际化的组织，如XHTML、CSS、JavaScript、AJAX等。

DOM的官方定义

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

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

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

DOM的分类

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

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:当前的时间类型。
clientX 和clientY:距离窗口左边和上边的距离。
pageX 和 pageY:距离网页左边和上边的距离。
screenX 和 screenY:距离屏幕左边和上边的距离。

IE中的event对象

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

IE中Event对象属性。

type，clientX，clentY，x，y，screenX，screenY。同上。

简易购物车

随机生成小图片

目录