document对象获取例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2019/03/20作业</title>
<script src="js/hw.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.btn{
background-color: skyblue;
color: white;
}
</style>
</head>
<body>
<input type="button" name="btn1" id="btn1" value="第一题" />
<input type="button" name="btn2" id="btn2" value="第二题" />
<input type="button" name="btn3" id="btn3" value="第三题a" />
<input type="button" name="btn4" id="btn4" value="第三题b" />
<div id = "div1">
<h1 name="title1">div1的标题1</h1>
<a href="http://www.baidu.com"></a>
<p>div1中的内容</p>
<form action="#" id="form1" method="post">
<input type="radio" name="confirm" value="Yes" />是
<input type="radio" name="confirm" value="No" />否
<input type="submit" class="btn" value="提交"/>
</form> </div>
<div id="div2">
<h1 name="title2">div2的标题1</h1>
<p>div2中的内容</p>
<form action="#" id="form2" method="post">
<input type="button" class="btn" value="按钮" />
<input type="submit" class="btn" value="提交"/>
</form>
</div>
</body>
</html>
.html部分
window.onload = function(){
//第一题开始:获取Document对象的两个子节点,并且打印输出它们的节点类型和节点名称,直接获取body元素。
var b1 = document.getElementById("btn1");
b1.onclick=function(){
var cNodes = document.childNodes;
for(var i=0;i<cNodes.length;i++){
alert("文档节点的子节点的NodeType是"+cNodes.item(i).nodeType);
alert("文档节点的子节点的NodeName是"+cNodes[i].nodeName);
}
//直接获取body元素
var boy = document.body;
alert(boy.nodeName);
}
//第一题结束
//第二题开始:写出当前文档信息:标题,完整URL和域名
var b2=document.getElementById("btn2");
b2.onclick=function(){
var title1=document.title;
alert(title1);
var url1=document.URL;
alert(url1);
var yuming=document.domain;
alert(yuming);
}
//第二题结束
//第三题开始
//a:通过id获取div2的节点,并输出它的id(innerHTML)
var b3=document.getElementById("btn3");
b3.onclick=function(){
var dv2=document.getElementById("div2");
alert(dv2.innerHTML);
}
//b)通过tagName获取文档中所有h1标签,并循环显示它的内容。并且通过name的名称,找到name为title1的h1标签,打印它的内容。
var b4=document.getElementById("btn4");
b4.onclick=function(){
var tagb=document.getElementsByTagName("h1");
for(i=0;i<tagb.length;i++){
alert(tagb[i].innerHTML);
}
var h1name=tagb.namedItem("title1");
alert(h1name.innerHTML);
}
//c)通过Name获取名称相同的单选按钮,并循环打印单选按钮的value。
var bt=document.getElementsByName("confirm");
for (var i=0;i<confirm.length;i++){
alert(confirm.item(i).value);
}
//d)直接获取文档中所有的form表单,并打印表单的id。获取所有a链接,并打印a链接的href
var forms=document.forms;
for(i=0;i<forms.length;i++){
alert(forms[i].id);
}
var links=document.links;
for(i=0;i<links.length;i++){
alert(links.item(i).href);
}
//第三题结束
}
document对象获取例子的更多相关文章
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- 各浏览器对使用 document.id 和 document.name 获取对象的支持存在差异
标准参考 无. 问题描述 各浏览器使用 document.id 和 document.name 方法获取对象引用的支持存在差异. 造成的影响 某些浏览器中通过 document.id 和 docume ...
- 【死磕 Spring】----- IOC 之 获取 Document 对象
原文出自:http://cmsblogs.com 在 XmlBeanDefinitionReader.doLoadDocument() 方法中做了两件事情,一是调用 getValidationMode ...
- document.querySelector获取不到html标签对象实例的原因
官方给出的HTML中的ID的命名规范: 1.必须以字母 A-Z 或 a-z 开头2.其后的字符:字母(A-Za-z).数字(0-9).连字符("-").下划线("_&qu ...
- jQuery获取iframe的document对象
$(function() { var result = $('#myframe').prop('contentWindow').document; console.log(result); }); 这 ...
- Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
- 9.22 window对象、document对象
一.window对象: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口 dialogArgume ...
- Window.document对象 轮播练习
Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docun ...
- HTML Window.document对象
1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunmen ...
随机推荐
- Java进阶篇设计模式之一 ----- 单例模式
前言 在刚学编程没多久就听说过设计模式的大名,不过由于当时还是个彻彻底底的菜鸟,并没有去触碰.直到在开始工作中对简单的业务代码较为熟悉之后,才正式的接触设计模式.当时最早接触的设计模式是工厂模式,不过 ...
- 一个box-sizing: border-box和felx混合使用中遇到的问题
之前在项目中遇到一个布局上很趣的问题(也可能是笔者才疏学浅,哈哈).布局大概是这样的: 外层包裹器:采用flex布局,并指定内部子弹性盒子元素水平显示 侧边栏:flex盒子的子元素,可收起和展开.展开 ...
- API接口通讯参数规范
通常在很多的公司里面,对于接口的返回值没做太大规范,所以会比较常看到各个项目各自定义随意的返回值,比如以下情况: 1. 直接返回bool值(True或者False) 2. 返回void,只要不是异常信 ...
- Asp.Net Core 轻松学-利用文件监视进行快速测试开发
前言 在进行 Asp.Net Core 应用程序开发过程中,通常的做法是先把业务代码开发完成,然后建立单元测试,最后进入本地系统集成测试:在这个过程中,程序员的大部分时间几乎都花费在开发.运行 ...
- 痞子衡嵌入式:串口调试工具Jays-PyCOM诞生记 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是串口调试工具Jays-PyCOM诞生. 串口调试助手是嵌入式开发里非常常用的小工具,市面上有非常多流行的串口调试工具,比如TeraTe ...
- [SpringBoot guides系列翻译]调度任务
原文 调度任务 用spring实现一个任务调度. 你将做的 你将做一个应用每5秒钟打印当前时间,用@Scheduled注解. 你需要啥 15分钟 文本编辑器或者IDE JDK1.8+ Gradle4+ ...
- sql 查询 某字段 重复次数 最多的记录
需求 查询小时气象表中 同一日期.同一城市.同意检测站点 首要污染物出现出书最多的记录 第一步: 添加 排序字段 select StationID,RecordDate,CityID,Primar ...
- 迭代器模式 Iterator 行为型 设计模式(二十)
迭代器模式(Iterator) 走遍天下,世界那么大,我想去看看 在计算机中,Iterator意为迭代器,迭代有重复的含义,在程序中,更有“遍历”的含义 如果给定一个数组,我们可以通过for循 ...
- pdf文件下载水印添加的中文与空格问题解决
public static boolean waterMark(String inputFile, String outputFile, String waterMarkName)throws IOE ...
- 最近javascript的学习小记
一.关于javascript的原型与隐式原型 1.prototype 首先function是一个对象,每一个function都具有一个prototype对象,prototype对象默认是{constr ...