DOM编程学习
关注
分享
扫一扫
DOM编程是JavaScript脚本语言中最重要的一部分，它是和HTML文档以及CSS样式最有效的紧密结合，一步一步来进行DOM的学习。
life is wonderful
pay for life, pay for yourself
展开
-
Web前端开发实战1：二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校网站，电商类网站，新闻类网站等大型？网站很常见，那么它的实现原理是什么呢？学习了Web前端开发的知识后，我们是可以实现这样的功能的。复杂的都是从基础效果上添加做出来的，原理和流程还是一样的，今天开始做一些简单的二级下拉式菜单。 横向一级菜单我们见到的很多，如下图所示是： 二级下拉菜单图： 二级下拉菜单是原创 2015-12-30 20:47:58 · 35336 阅读 · 2 评论 -
轻松学习JavaScript二十八：DOM编程学习之事件处理函数
在JavaScript语言中可以处理的事件类型可以分为：鼠标事件，键盘事件和HTML事件。对于于每一个事件，它都有自己的触发范围和方式，如果超出了触发范围和方式，事件处理就会失效。所有的事件处理函数都会有两个部分组成，on+事件名称，例如click事件的时间处理函数就是：onclick。 JavaScript事件处理函数及其使用列表 一鼠标事原创 2015-12-29 13:34:16 · 1976 阅读 · 1 评论 -
轻松学习JavaScript二十七：DOM编程学习之事件模型
在介绍事件模型之前，我们先来看什么是事件和什么是event对象。 一事件介绍 JavaScript事件是由访问Web页面的用户引起的一系列操作，使我们有能力创建动态页面，事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个onclick事件来触发某个函数原创 2015-12-28 20:50:19 · 2239 阅读 · 1 评论 -
轻松学习JavaScript二十六：DOM编程学习之动态添加JS脚本和CSS样式
先来一贯使用的HTML文档代码：DOMwindow.onload=function(){}div区域 一动态加载外部JS文件 要动态加载外部index.js文件的代码：alert("I am JS file!"); 动态加载外部JS文件的代码：//动态加载外部JS文件var flag=true; //设置tr原创 2015-12-27 20:01:31 · 2760 阅读 · 3 评论 -
轻松学习JavaScript二十五：DOM编程学习之操作CSS样式(二)
四通过class属性操作外联式 还是先来一个HTML文档的代码：DOMwindow.onload=function(){ }div区域 CSS样式表style.css文件的代码：.box1{ background-color:#00FF00; }.box2 { color:#FFFFFF;}原创 2015-12-23 18:48:35 · 2630 阅读 · 0 评论 -
轻松学习JavaScript二十四：DOM编程学习之操作CSS样式(一)
CSS样式作为HTML的辅助，可以增强页面的显示效果。前面学了DOM操作HTML，因此也要学DOM操作CSS样式的方法。在学习CSS的时候，已经知道了CSS插入到HTML文档有三种情况，分别为：行内式，内嵌式和外联式(这是我们最常用的)。下面就来看怎么操作这三种情况： 一操作行内式 先来写一个HTML文档：<!DOCTYPE html PUBLIC "-原创 2015-12-22 21:26:15 · 3152 阅读 · 6 评论 -
轻松学习JavaScript二十三：DOM编程学习之操作表格
一使用HTML标签创建表格： 代码： 人员表 姓名 性别 年龄 张三原创 2015-12-21 20:27:41 · 2389 阅读 · 0 评论 -
轻松学习JavaScript二十二：DOM编程学习之节点操作
DOM编程不仅仅可以查找三种节点，也可以操作节点，那就是创建，插入，删除，替换和复制节点。先来看节点操作方法： 还是借用一贯的HTML代码：DOM编程window.onload=function(){ } 你喜欢那个城市 北京市 天津市 上海市原创 2015-12-19 21:09:48 · 3036 阅读 · 2 评论 -
轻松学习JavaScript二十一：DOM编程学习之获取元素节点的子节点和属性节点
我们这里所说的获取元素节点的所有子节点包含元素子节点和文本节点两种。还是拿上一篇博文的代码实例进行分析：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">JS代码位置window.onl原创 2015-12-18 21:21:44 · 5729 阅读 · 6 评论 -
轻松学习JavaScript二十：DOM编程学习之获取节点
我们这里所说的获取节点包含元素节点，属性节点和文本节点。通常，通过DOM我们就能够操作HTML元素。为了做到这件事情，您必须首先找到该元素。W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。 我们先来写一个简单的HTML文档以供我们进行测试，并且JS代码都是写在window.onload事件中：<!DOCTYPE html PUBLIC "-原创 2015-12-17 19:57:10 · 2192 阅读 · 1 评论 -
轻松学习JavaScript十九：DOM编程学习之在HTML文档什么位置编写JS代码
在学习DOM编程的时候又回过头去看了过去写的JS代码，并没有考虑在什么位置编写JS代码更加符合规范以及当HTML文档加载完毕后再运行JS代码的问题。在刚接触JS的时候，写过一篇博文：轻松学习JavaScript三： JavaScript与HTML的结合，只是单纯就HTML与JS的结合说明JS代码放在什么位置，可能一些还是错的，现在开始在博文中纠错。开始学习DOM编程的时候又遇到了新的问原创 2015-12-16 20:44:35 · 2261 阅读 · 0 评论 -
轻松学习JavaScript十八：DOM编程学习之DOM简介
一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API)。DOM将把整个页面规划成由节点层级构成的文档。DOM描绘了一个层次化的节点树，运行开发人员添加，移除和修改页面的某一部分。HTML或XML页面的每个部分都是一个节点的衍生物。通过DOM，可访问HTML文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型，DOM模型被构造为对象的原创 2015-12-15 17:05:17 · 2640 阅读 · 2 评论