JavaScript学习笔记(四)——DOM
第五章 网页交互——文本对象模型【Document object model】
1 简单介绍DOM,dom是将html与javascript进行交互的工具。
【使用innerHTML时注意:html中的内容是按照HTML本身的先后顺序加载的。故js对应代码应置于html之后】
问题:
*document.getElementById时,id不存在返回null,存在返回对应字符串;
*planet.innerHTML其中innerHTML属性可以修改字符串的内容;
*getElementsByClassName可以返回类名的元素集合;
*getElementsByTagName返回与指定标签名匹配的元素;
*innerHTML甚至可以替换整个body的内容;
2 介绍window.onload=函数名;
回调函数,在网页加载完毕后再回调onload指向的指定函数。
3 关于元素的修改
(1)添加新元素
<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var para=document.createElement("p");//创建标签元素 var node=document.createTextNode("这是新段落。");//创建文本 para.appendChild(node);//为p添加文本 //为div1添加元素 var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
(2)修改元素
var planet=document.getElementById("p2");//获取DOM指定ID的元素 planet.innerHTML="Red Alert:hit by phaser fire!";//使用innerHtml属性修改内容
(3)删除元素
<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent=document.getElementById("div1");//获取父元素 var child=document.getElementById("p1");//获取子元素 parent.removeChild(child);//删除 </script> </body> </html>
4 特性
(1)设置setAttribute();
例如:
planet.setAttribute("class","redtext");//为planet添加一个class名为redtext
(2)获取特性getAttribute();
例如:
var alttext=scoop.getAttribute("alt");//其中scoop类似于planet,alt为获取其值的特性的名称??
5 完整例子
<!doctype html> <html lang="en"> <head> <title>My blog</title> <meta charset="utf-8"> <style type="text/css"> .redtext{ color:red; } </style> <script language="JavaScript" type="text/JavaScript"> function inni(){ var planet=document.getElementById("p2");//获取DOM指定ID的元素 planet.innerHTML="Red Alert:hit by phaser fire!";//使用innerHtml属性修改内容 planet.setAttribute("class","redtext");//设置特性 var attribute=planet.getAttribute("text");//获取特性,返回为null,不太清楚什么是特性? console.log("I'm not see the image in the console,but I'm told it looks like:"+attribute); } window.onload=inni; </script> </head> <body> <h1>My blog</h1> <div id="entry1"> <h2>Great day bird watching</h2> <p id="p1"> Today I saw three ducks!<br /> I named them <br /> Huey,Louie,and Dewey. </p> <p id="p2"> I took a couple of photos... </p> </div> </body>
70 </html>
JavaScript学习笔记(四)——DOM的更多相关文章
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- Javascript学习笔记四——操作表单
Javascript学习笔记 大多网页比如腾讯,百度云之类的需要登陆,用户输入账号密码就可以登陆,那么浏览器是如何获取用户的输入的呢?今天就记录一下操作表单. 操作表单与操作DOM是差不多的,表单本身 ...
- javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- JavaScript学习笔记之DOM介绍
目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...
- javascript学习笔记之DOM
DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript 学习笔记-HTML&&DOM
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...
- JavaScript学习笔记(四十四) 装饰器
装饰器模式(Decorator) 在装饰器模式中,可以在运行时给一个对象动态的添加额外的功能.当和静态类打交道的时候(static classes),这可能是一个挑战.但在JavaScript中,对象 ...
- JavaScript学习笔记之DOM对象
目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...
- Javascript学习笔记三——操作DOM(二)
Javascript学习笔记 在我的上一个博客讲了对于DOM的基本操作内容,这篇继续巩固一下对于DOM的更新,插入和删除的操作. 对于HTML解析的DOM树来说,我们肯定会时不时对其进行一些更改,在原 ...
随机推荐
- HttpClient使用小结
使用HttpClient发送请求.接收响应很简单,只要如下几步即可. 1. 创建HttpClient对象. 2. 如果需要发送GET请求,创建HttpGet对象:如果需要发送POST请求,创建Http ...
- UESTC - 1987 童心未泯的帆宝和乐爷 (第k短路 A*算法+SPFA算法 模板)
传送门: http://www.qscoj.cn/#/problem/show/1987 童心未泯的帆宝和乐爷 Edit Time Limit: 10000 MS Memory Limit: ...
- php生成word文档
使用fopen文件操作函数来做,需要注意的直接生成中文文件名会乱码,(生成word和微软的编码不一样)需要转码生成.word内容保持utf8编码就好. $file_name = iconv(" ...
- linux 学习第十四天(Apache安装、基于ip、基于域名、基于端口配置)
一.虚拟主机 A.基于IP地址 B.基于域名 C.基于端口号 复习yum仓库挂载 mkdir /media/cdrom mount /dev/cdrom /media/cdrom/ vim /et ...
- zookeeper无法启动"Unable to load database on disk
QuorumPeerMain,ResourceManager都没有起来 resourcemanager.log如下 2018-09-28 23:17:02,787 FATAL org.apache.h ...
- [FreeRTOS入门] 1.CubeMX中FreeRTOS配置参数及理解
1.有关优先级 1.1 Configuration --> FreeRTOS MAX_PRIORITIES 设置任务优先级的数量:配置应用程序有效的优先级数目.任何数量的任务都可以共享一个优先级 ...
- 阿里云ubantu16.04 搭建LAMP环境
1.登录服务器 2.sudo apt-get update 更新软件列表 3.sudo apt-get install lamp-server^ (注意右上角的' ^ '这个不能少) 输入apach ...
- Redis安装——在CentOS7下的安装
参考自:https://linux.cn/article-6719-1.html 一.安装 首先通过xshell5先登陆来到字符界面(xshell通过SSH连接请参见之前随笔) 先下载redis,这里 ...
- 20155313 2016-2017-2 《Java程序设计》第二周学习总结
20155313 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 1.1 基本类型 整数:可细分为short整数(占2字节).int整数(占4字节)与long ...
- 20155338 2016-2017-2 《Java程序设计》第3周学习总结
20155338 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 本周学习量比较多,但是知识点并不是特别难,学习了书本的第四五章,其中个人重点学习了数组对象. ...