1、DOM操作

Document：整个html文件都称之为一个document文档

Element：所有的标签都是Element元素

Attribute：标签里面的属性

Text：标签中间夹着的内容为text文本

Node：document、element、attribute、text统称为节点node。

2、Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象

后面两个方法获取之后需要遍历！

另外还有两个方法很重要

创建文本节点：document.createTextNode()

创建元素节点：document.createElement()

3、Element对象

我们所认知的html页面中所有的标签都是element元素

下面的常用属性和方法可用于所有 HTML 元素上：

element.appendChild()

向元素添加新的子节点，作为最后一个子节点。

element.firstChild

返回元素的首个子节点。

element.getAttribute()

返回元素节点的指定属性值。

element.innerHTML

设置或返回元素的内容。

element.insertBefore()

在指定的已有的子节点之前插入新节点。

element.lastChild

返回元素的最后一个子元素。

element.setAttribute()

把指定属性设置或更改为指定值。

element.removeChild()

从元素中移除子节点。

element.replaceChild()

替换元素中的子节点。

4、Attribute对象

我们所认知的html页面中所有标签里面的属性都是attribute

5、DOM练习

在页面中使用列表显示一些城市（成都、西安、大理），我们希望点击一个按钮实现动态添加城市。

1）步骤分析：

第一步：事件(onclick)

第二步：获取ul元素节点

第三步：创建一个城市的文本节点

第四步：创建一个li元素节点

第五步：将文本节点添加到li元素节点中去。

第六步：使用element里面的方法appendChild()来添加子节点

2）具体代码实现：（window.onload设置隐名函数）

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>动态添加城市</title>

         <script>

             window.onload=function(){

                 document.getElementById("btn").onclick=function(){

                     //1.获取ul元素节点

                     var ulEle=document.getElementById("ul1");

                     //2.创建一个城市的文本节点

                     var textNode=document.createTextNode("舟山");//舟山

                     //3.创建一个li元素节点

                     var liEle=document.createElement("li");     //<li></li>

                     //4.将文本节点添加到li元素节点中去

                     liEle.appendChild(textNode);                //<li>舟山</li>

                     //5.将li添加到ul中

                     ulEle.appendChild(liEle);

                 }

             }

         </script>

     </head>

     <body>

         <input type="button" value="添加新城市" id="btn"/>

         <ul id="ul1">

             <li>成都</li>

             <li>西安</li>

             <li>大理</li>

         </ul>

     </body>

 </html>

在谷歌浏览器内运行，点击按钮添加了新城市，效果如下：

JavaScript学习——DOM对象的更多相关文章

  1. JavaScript学习04 对象

    JavaScript学习04 对象 默认对象 日期对象Date, 格式:日期对象名称=new Date([日期参数]) 日期参数: 1.省略(最常用): 2.英文-数值格式:月 日,公元年 [时:分: ...

  2. Javascript学习4 - 对象和数组

    原文:Javascript学习4 - 对象和数组 在Javascript中,对象和数组是两种基本的数据类型,而且它们也是最重要的两种数据类型. 对象是已命名的值的一个集合,而数组是一种特殊对象,它就像 ...

  3. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  4. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  5. JavaScript之DOM对象的获取

    之前我们讲过JavaScript之DOM对象获取的两篇文章,本文是该系列文章之三,点击回顾上两篇文章能更好地理解本文.<JavaScript之DOM对象的获取(一)>: <JavaS ...

  6. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  7. JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）

    DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...

  8. JavaScript操作DOM对象

    js的精华即是操作DOM对象 [1]先看代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  9. JavaScript之DOM对象获取（1）

    我们在操作html中的节点的时候,第一步就需要获取到对应节点(元素),才能有后续的操作.获取节点的方式有很多 1.document.getElementById(‘id值’) 通过id精确的选中某一个 ...

随机推荐

  1. 懒人npm运行和打包命令

    源码: @echo off&setlocal EnableDelayedExpansion & color 3e :start title npm 常用命令 by:ceet@vip.q ...

  2. SSH 项目中 用Hibernate底层 简单的封装DAO层

    废话不多少了,主要是使用hibernate的查询方法,自己封装了DAO层,供service来方便使用. 首先:必须要继承的 public class CommonDao extends Hiberna ...

  3. CorelDRAW简单绘制的一杯满满的橙汁教程

    CorelDRAW怎么画一杯橙汁?方法很简单,首先绘制一个闭合路径,执行线性渐变,填充颜色:复制图形,使用刻刀工具裁剪两半,更改不透明度:然后为橙汁增加底部椭圆:修剪橙子片:绘制吸管:最后加上一层橙子 ...

  4. Windows系统Python环境搭建

    Python下载 下载地址:https://www.python.org/downloads/ 选择需要下载的版本 以Python3.3.7版本为例,下载64位和32位都分别有三种方式,依次是压缩包, ...

  5. Eclipse中使用GIT将已提交到本地的文件上传至远程仓库

    GIT将已提交到本地的文件上传至远程仓库: 1.  右击项目——Team——Push to Upstream,即可将已保存在本地的文件上传推至GIT远程仓库.

  6. 路飞学城Python-Day49

    55-善于使用父亲的padding,而不是margin 56-文本属性和字体属性 div{ width: 300px; height: 100px; border: 1px solid red; /* ...

  7. luogu p1003

    P1003 题意 经过多个矩形(1e3)覆盖后后某个坐标属于那个矩形(仅仅是一次询问) 大水题,直接的做法,从后向前处理矩形是否覆盖查询的点,若覆盖,则是该矩形编号 题解 int get_num(){ ...

  8. [NOIP补坑计划]NOIP2016 题解&做题心得

    感觉16年好难啊QAQ,两天的T2T3是不是都放反了啊…… 场上预计得分:100+80+100+100+65+100=545(省一分数线280) ps:loj没有部分分,部分分见洛咕 题解: D1T1 ...

  9. 小程序全局状态管理，在页面中获取globalData和使用globalSetData

    GitHub: https://github.com/WozHuang/mp-extend 主要目标 微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...

  10. ZOJ 3203 Light Bulb（ 三分求极值 ）

    链接:传送门 题意: 求影子长度 L 的最大值 思路:如果 x = 0 ,即影子到达右下角时,如果人继续向后走,那么影子一定是缩短的,所以不考虑这种情况.根据图中的辅助线外加相似三角形定理可以得到 L ...