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树来说,我们肯定会时不时对其进行一些更改,在原 ...
随机推荐
- git删除指定文件夹
1.在本地仓库删除指定文件 git rm 文件名名称 2.在本地仓库删除指定文件夹 git rm -r 文件夹/ 3.提交修改 git commit -m"删除文件夹" 4.推送到 ...
- Vue指令 常见的几个内置指令
1.v-if指令:判断指令,根据表达式值得真假来插入或删除相应的值. 2.v-show指令:条件渲染指令,无论返回的布尔值是true还是false,元素都会存在在html中,只是false的元素会隐藏 ...
- Oracle表分区分为四种:范围分区,散列分区,列表分区和复合分区(转载)
一:范围分区 就是根据数据库表中某一字段的值的范围来划分分区,例如: 1 create table graderecord 2 ( 3 sno varchar2(10), 4 sname varcha ...
- vue keep-alive 不生效 以及前进 后退 对数据刷新和保留缓存操作
https://blog.csdn.net/sinat_37255207/article/details/89373825 因为项目Vue router 连续嵌套了好几层 首先检查keep-alive ...
- php 后端刷新页面
public function index() { $b = date('Y-m-d H:i:s'); header('refresh:10'); $c = strtotime($b); $d = s ...
- MySQL数据约束
定义:建表时在各字段类型后设置,用来对用户操作表的数据进行约束. 代码: 1.默认值 : default ' ' 作用:当用户对使用默认值的字段不插入值的时候,就使用默认值(自动填充). 注意: ...
- js身份证校验
通过js实现对15位或者18位身份证格式校验: 通过调用idCardNoUtil.checkeIdCardNo(idCardNo)传入身份证号码,实现校验. var idCardNoUtil = { ...
- PHP实现验证码功能
原文链接:http://www.qqdeveloper.com/a/54.html 什么是验证码? 借用百度的解释:验证码这个词最早是在2002年由卡内基梅隆大学的路易斯·冯·安.Manuel Blu ...
- ElasticSearch优化系列二:机器设置(内存)
预留一半内存给Lucene使用 一个常见的问题是配置堆太大.你有一个64 GB的机器,觉得JVM内存越大越好,想给Elasticsearch所有64 GB的内存. 当然,内存对于Elasticsear ...
- phporjquery生成二维码
一.php生成二维码 下载文章末尾链接中phpcode文件 include "./phpqrcode/qrlib.php"; //QRcode::png('http://www.b ...