<!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对象获取例子的更多相关文章

  1. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  2. 各浏览器对使用 document.id 和 document.name 获取对象的支持存在差异

    标准参考 无. 问题描述 各浏览器使用 document.id 和 document.name 方法获取对象引用的支持存在差异. 造成的影响 某些浏览器中通过 document.id 和 docume ...

  3. 【死磕 Spring】----- IOC 之 获取 Document 对象

    原文出自:http://cmsblogs.com 在 XmlBeanDefinitionReader.doLoadDocument() 方法中做了两件事情,一是调用 getValidationMode ...

  4. document.querySelector获取不到html标签对象实例的原因

    官方给出的HTML中的ID的命名规范: 1.必须以字母 A-Z 或 a-z 开头2.其后的字符:字母(A-Za-z).数字(0-9).连字符("-").下划线("_&qu ...

  5. jQuery获取iframe的document对象

    $(function() { var result = $('#myframe').prop('contentWindow').document; console.log(result); }); 这 ...

  6. Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:     var a =docunme ...

  7. 9.22 window对象、document对象

    一.window对象: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口 dialogArgume ...

  8. Window.document对象 轮播练习

    Window.document对象 一.找到元素:     docunment.getElementById("id"):根据id找,最多找一个:     var a =docun ...

  9. HTML Window.document对象

    1.Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunmen ...

随机推荐

  1. vue项目首屏加载优化实战

    问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...

  2. 补习系列(15)-springboot 分布式会话原理

    目录 一.背景 二.SpringBoot 分布式会话 三.样例程序 四.原理进阶 A. 序列化 B. 会话代理 C. 数据老化 小结 一.背景 在 补习系列(3)-springboot 几种scope ...

  3. SLAM+语音机器人DIY系列：（三）感知与大脑——3.轮式里程计与运动控制

    摘要 在我的想象中机器人首先应该能自由的走来走去,然后应该能流利的与主人对话.朝着这个理想,我准备设计一个能自由行走,并且可以与人语音对话的机器人.实现的关键是让机器人能通过传感器感知周围环境,并通过 ...

  4. 数据分析之matplotlib.pyplot模块

    首先都得导模块. import numpy as np import pandas as pd import matplotlib.pyplot as plt from pandas import S ...

  5. socket,模拟服务器、客户端通信

    服务器代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;u ...

  6. 为 Eureka 服务注册中心实现安全控制

    上一篇Eureka 实现微服务注册发现讲了用 Eureka 实现单体版的服务注册与发现.因为本篇是在上一篇的基础上的一点扩充,所以读此篇之前要保证看了上一篇. Eureka 如果不加安全控制,会存在下 ...

  7. ajax的嵌套需要注意的问题

    当我们要嵌套ajax的时候,需要注意 异步/同步 的处理,一般是要设置成同步,如果是异步,那么被嵌套的ajax的操作很可能获取不到想要的值,因为他可能比嵌套他的ajax跑的更早 在ajax中有一个as ...

  8. 使用Golang搭建web服务

    如何用golang搭建一个web服务呢?菜鸟官网的go web编程教程已经介绍了web服务器的工作原理,这里就不赘述了. 我们先看个例子:http.go package main import ( & ...

  9. 20190421-那些年使用过的CSS预处理器（CSS Preprocessor）

    写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...

  10. Android Monkey压力测试使用

    一.Monkey简介: Monkey是Android中的一个命令行工具,可以运行在模拟器里或者现实设备中,向系统发送伪随机的用户事件流(点击.滑动.Application切换.横竖屏.应用关闭)实现对 ...