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. Python 函数(二)

    参数 以下是调用函数时可使用的正式参数类型: 必备参数 关键字参数 默认参数 不定长参数 必备参数 必备参数须以正确的顺序传入函数.调用时的数量必须和声明时的一样. 调用printme()函数,你必须 ...

  2. EF Code First 使用(一)

    第一步:创建MVC5项目,添加数据库实体,建立上下文对象. 第二步:创建数据库和添加数据

  3. iOS开发 小知识点

    1/ iOS汉字百分号互相转换. //汉字 NSString * name = @"时间终于将我对你的爱消耗殆尽"; //汉字转为百分比 NSString * encodeStri ...

  4. SQLAlchemy tutorial

    SQLAlchemy tutorial 重要概念 ORM:数据库对象 <--> class --> 类实例instance 定义数据库连接 session:数据库事务通过sessio ...

  5. 利用PBFunc在Powerbuilder中进行图片格式转换

    利用PBFunc的n_pbfunc_image对象可以方便的进行图片格式的转换与大小转换 支持相互转换的格式有以下几种: FORMAT_BMP //bmp格式FORMAT_GIF  //gif格式FO ...

  6. Dynamic dispatch mechanisms

    Normally, in a typed language, the dispatch mechanism will be performed based on the type of the arg ...

  7. ZBrush曲线功能介绍

    在ZBrush®中曲线功能是一个非常有用的工具.插入笔刷,曲线笔刷,拓扑和许多地方都会用到它.生成曲线的方式有很多种.可以使用重拓扑引导线,可以使用笔触菜单下曲线功能中的框架网格,可以使用ZBrush ...

  8. JQuery选择器排除某元素实现js代码

    使用JQuery选择器实现排除某一大元素下的某一元素的核心代码是使用.not()方法,如下所示: $("button").not("#save").attr(& ...

  9. Pyhton学习——Day22

    #有缩进的代码表示局部作用域的代码#if_name_ =='_main_' # while True#先引入一个os模块import os,sys,time,json# print(os.path.d ...

  10. AIM Tech Round 5 1028cf(A-E)

    AIM Tech Round 5 (codeforces上题目编号是1028)(A-E) ---完全被这次比赛打击,自己真的很渣--- 战况 依旧3题选手 被构造题坑得好惨 稍稍涨了rating,希望 ...