DOM Document
1.DOM Document对象
定义:每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
⑴Document对象集合:
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。
⑵Document对象属性:
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。
以上两点都是不太常用的。然后就是
⑶Document对象方法
主要有以下几种:
close()关闭用 document.open() 方法打开的输出流,并显示选定的数据。
getElementById()返回对拥有指定 id 的第一个对象的引用。
getElementsByName()返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open()打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln()等同于 write() 方法,不同的是在每个表达式之后写一个换行符。
方法里面需要我们重点掌握的是getElementById(),它可以让我们快速的在网页中找到需要的元素
例如:
**************************
我们先在body里面写
<input type="text" id="one" placeholder="1"/> 加 <input type="text" id="two"/>
<input type="button" value="=" id="btn"/><input type="text" id="three"/>
然后在script里面利用getElementById()来找到各个Id的值,这样我们就可以做出简单的计算器
function scr(){
var a=parseFloat(document.getElementById("one").value);
var b=parseFloat(document.getElementById("two").value);
document.getElementById("three").value=(a+b);
}
document.getElementById("btn").onclick=scr;
***************************
以上代码可以让我们做出一个加法运算,当然要做减法 乘法什么的只需要改变value=(a+b)的符号就OK了
2.HTML DOM Element对象
定义:HTML DOM 节点
在 HTML DOM (文档对象模型)中,每个部分都是节点:文档本身是文档节点。 所有 HTML 元素是元素节点
所有 HTML 属性是属性节点 。HTML 元素内的文本是文本节点。 注释是注释节点
Element 对象
在 HTML DOM 中,Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点。
属性和方法
这个属性和方法实在太多了,挑个我了解的讲一下(详细的可以在W3school上查看)
element.attributes是指返回元素属性的NamedNodeMap
例如:
<input id="text1" type="button" value="用户名" onclick="fun()" >
function fun(){
document.getElementById("text1").setAttribute("value","提交");
document.getElementById("text1").style.color="blue"
}
这几条代码的效果就是把叫用户名的一个按钮改成叫提交的按钮。并且让字体的颜色改变成蓝色
DOM Document的更多相关文章
- DOM (Document Object Model)文档对象模型
[理解下DOM] DOM——Document Object Mode.DOM是网页上XHTML中文档正文标题啊.段落.列表.样式.以及ID/class等所有其他数据的一个内部表示.我自己的理解是将网页 ...
- HTML DOM Document 对象
HTML DOM Document 对象 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点: 文档是一个文档. 所有的HTML ...
- HTML DOM Document
Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 提示:Document 对 ...
- cxf 报错:java.lang.NoSuchMethodError: org.apache.ws.commons.schema.XmlSchemaCollection.read(Lorg/w3c/dom/Document;Ljava/lang/String;)
由于没有仔细查看官方提供的文档,由jdk版本不一致导致的出错: http://cxf.apache.org/cxf-316-release-notes.html 自己使用的是jdk1.8. 报Exce ...
- JavaScript -- 时光流逝(十一):DOM -- Document 对象
JavaScript -- 知识点回顾篇(十一):DOM -- Document 对象 (1) document.activeElement: 返回文档中当前获得焦点的元素. <!doctype ...
- org.w3c.dom.Document 与org.dom4j.Document互转
public static Document parse(org.w3c.dom.Document doc) throws Exception { if (doc == null) { return ...
- org.w3c.dom document 和xml 字符串 互转
转自:https://blog.csdn.net/wmyasw/article/details/8686420 package com.mymhotel.opera; import java.io.F ...
- javascript之DOM(Document Object Model) 文档对象模型
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象
ylbtech-浏览器端-W3School-JavaScript-HTML DOM:HTML DOM Document 对象 1.返回顶部 1. HTML DOM Document 对象 Docume ...
随机推荐
- Windows下修改Oracle监听端口
先放开防火墙的端口,再来改监听端口. 只有一个实例: net stop OracleOraDb11g_home1TNSListener 再运行 NET Manager 修改实例名与Listener的端 ...
- ( C++) Access the hard drive.
// Open up the volume HANDLE hVolume = CreateFile(wstrPath, GENERIC_READ, FILE_SHARE_READ | FILE_SHA ...
- EF执行SQL
1.EntityFramework 执行SQL语句进行参数化查询代码示例 参考:http://blog.csdn.net/chz_cslg/article/details/49002093
- 修改sys密码与nbu备份脚本密码后,nbu备份报密码无效
公司要求口令强化,在修改sys密码后nbu的.sh脚本connect备份归档的sys/passwd也随之修改修改后每个业务备份均失败, 每次备份到归档那里就结束报密码无效,疑惑备份脚本密码也同步修改了 ...
- VC++6.0 配置CppUTest测试环境
最近看<软件项目成功之道>,书中无数次提及到“单元测试”对于项目成败的重要性,看到同事将CppUTest用于Linux动态库测试,于是在VC++6.0环境下搭建一个基于CppUTest的单 ...
- Access restriction错误解决办法
Access restriction错误, XX方法 is not accessible due to restriction on required library XXlib 解决方案: Ecli ...
- 1、win32创建窗口函数(windows程序内部运行机制)
利用win32创建窗口函数,主要操作步骤为: 1.设计一个窗口类 2.注册窗口类 3.创建窗口 4.显示及窗口更新 5.消息循环 6.窗口过程函数 (1)设计一个窗口类 设计窗口类,这样的类型已经 ...
- asp.net中按钮回车事件(转自http://www.cnblogs.com/adinet/archive/2013/03/03/2941424.html)
在做ASP.net WEB应用的时候,常常遇到会在同一个页面里添加多个按钮,而每个按钮肯定都会触发页面回送事件. 在ASP.NET中,只能指定一个带有runat="server"的 ...
- 所有古诗词的api
服务商:api.getlove.cn 分类:诗词 更新时间:2016-03 如果接口不满足您的要求,您可以联系qq:2265658022购买完整的数据库 免费apikey:56eab527a0facb ...
- python 脚本中使用了第三方openpyxl 打包程序运行提示ImportError:cannot import name __version__
最近写了一个脚本,脚本中使用了第三方openpyxl(openpyxl是使用 pip install openpyxl 下载的),先是使用py2exe打包程序,打包过程中提示很多文件没有包含,在没有仔 ...