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树来说,我们肯定会时不时对其进行一些更改,在原 ...
随机推荐
- js实现限制上传文件大小
<html> <head> <script type="text/javascript"> var isIE = /msie/i.test(na ...
- 解决error possibly undefined macro AC_MSG_ERROR
问题 出现如下缺少宏的问题 error: possibly undefined macro: AC_MSG_ERROR error: possibly undefined macro: AC_SUBS ...
- vue项目中分享到朋友圈,调用微信接口
虽然微信提供了jssdk,不代表可以点击按钮进行分享到朋友圈,是需要微信自带的浏览器右上角进行分享.手机浏览器需要浏览器支持分享到朋友圈的分享机制. 微信jssdk地址: https://mp.wei ...
- .net core 实践笔记(二)--EF连接Azure Sql
** 温馨提示:如需转载本文,请注明内容出处.** 本文链接:https://www.cnblogs.com/grom/p/9902098.html 笔者使用了常见的三层架构,Api展示层注入了Swa ...
- 基于Python在MacOS上安装robotframework-ride
基于Python在MacOS上安装robotframework-ride https://www.jb51.net/article/153665.htm https://www.jianshu.com ...
- [iOS]一些第三方库
BHInfiniteScrollView 地址 https://github.com/qylibohao/BHInfiniteScrollView 功能 图片轮播 TZImagePickerContr ...
- 一位老手关于HTML5的见解
HTML5新特性总结 HTML5属于上一代HTML的新迭代语言,设计HTML5最主要的目的是为了在移动设备上支持多媒体!!!例如: video 标签和 audio 及 canvas 标记 HTM ...
- PHP实现多继承 trait 语法
原文地址:http://small.aiweimeng.top/index.php/archives/50.html PHP没有多继承的特性.即使是一门支持多继承的编程语言,我们也很少会使用这个特性. ...
- linux介绍及基本命令
linux简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基 ...
- jinjia2的使用
模板 要了解jinja2,那么需要先理解模板的概念.模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码可读性增强.并且更加容易理解和维护. 模板简单来说就是一个其中 ...