<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #item{

                 width: 200px;

             }

         </style>

     </head>

     <body>

     <!--第一种元素获取方法：

        可以使用内置对象document上的getElementById

     方法来获取页面上设置了id属性的元素，获取到的

     是一个html对象，然后将它赋值给一个变量-->

     <div id="item" style="">123</div>

     <div id="item1" style="">456</div>

     <input type="radio" value="0" name="zzz" id = "biaodan">表单</input>

     <input type="radio" value="1" name="zzz" id = "biaodan1">表单</input>

     <!--<input type="checkbox" value="0" name="zzz">表单</input>-->

     <script>

          var odiv = document.getElementById('item').textContent;

          console.log(odiv);

     </script>

     <!--第二种元素获取方法：

     将JavaScript语句放到window.onload触发的函数里面

     获取元素的语句会在页面加载完后才执行，就不会出错

     window指js当中最大的对象，代表窗口

     onload指页面加载完成之后

     -->

     <script type="text/javascript">

           var odiv1;

           var odiv2;

           var odiv3;

           var odiv4;

           var odiv5;

           window.onload = function(){

                odiv1 = document.getElementById('item').textContent;

                console.log(odiv1);

                odiv2 = document.getElementById('item');

                //odiv2.style.width = "200px";

                odiv2.style.height= "200px";

                odiv2.style.backgroundColor = "yellow";

                odiv2.style.fontSize = "30px"

 //               修改文本内容的两种方式

                odiv2.textContent = 111;

                odiv4 = document.getElementById('item1');

                odiv4.innerText = '<h1>333</h1>';/*innerText可用于解析文本，也可用于获取文本*/

                odiv4.innerHTML = '<h1>222</h1>';/*innerText可用于解析标签，也可用于获取标签*/

 //               在设置样式的时候,如果有些属性是双拼词background-color等要把中间的'-'换成第二单词的首字母大写

                //此处获取不到宽度。因为js获取样式只能获取行间样式，不能获取在head标签内写的CSS样式

                odiv3 = document.getElementById('item').style.width;

                console.log(odiv3);

 //             表单的元素获取：

                odiv5 = document.getElementById('biaodan');

                console.log(odiv5.value);

                odiv5.value=1;

                console.log(odiv5.value)

           }

     </script>

     <!--注意：script代码段要在所获取元素代码段的下边才能获取到元素。一般建议把script代码放在所有html代码的最下面或者是用window.onload-->

     </body>

 </html>

JS-05-元素获取的更多相关文章

  1. js与jquery获取父元素,删除子元素的不同方法

    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...

  2. 中高级前端应该必会，js实现事件委托代理、切换样式、元素获取相对于文档位置等

    1.介绍 随着组件开发大流行,现在三大框架已经基本占领了整个前端. 这时候,我们要是引入一个 jq 是不是先得你的项目非常臃肿,jq 也很不适合. 这个时候,你就需要来增加你 js 的功底. 2.各种 ...

  3. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

  4. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  5. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  7. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  8. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  9. js和jquery获取属性的区别

    一.获取元素: js获取元素: 根据id获取:document.getElementById("id"); 根据类名获取:document.getElementsByClassNa ...

  10. jquery/js iframe 元素操作

    1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...

随机推荐

  1. c++ list的坑

    std::list为空时调用pop_front的访问越界问题 std::list为空时调用pop_back访问越界问题 所以在使用pop_front . pop_back要先判断list是否为空 st ...

  2. PHP每日复习任务与复习记录

    [2019-10-10 16:05:00] PHP7之Trait详解 https://blog.csdn.net/qq_35255775/article/details/80610586 PHP中的魔 ...

  3. 用postman验证接口是否可掉通

    1.结合fidder抓包工具 2.打开postman 3.点击Launchpad右边“+” 4.选择postman,url粘贴fidder抓出来的数据 5.Header中粘贴fidder抓出来的KEY ...

  4. 学习linux命令，看这篇2w多字的linux命令详解

    用心分享,共同成长 没有什么比每天进步一点点更重要了 本文已收录到我的github:https://github.com/midou-tech/articles/tree/master/docs/li ...

  5. 一张图帮你记忆，Spring Boot 应用在启动阶段执行代码的几种方式

    前言 有时候我们需要在应用启动时执行一些代码片段,这些片段可能是仅仅是为了记录 log,也可能是在启动时检查与安装证书 ,诸如上述业务要求我们可能会经常碰到 Spring Boot 提供了至少 5 种 ...

  6. Web基础了解版10-Filter-Listener

    Filter 对于WEB应用来说,过滤器是一个驻留在服务器中的WEB组件,他可以截取客户端和WEB资源之间的请求和响应信息. 在一个WEB应用中可以部署多个过滤器,多个过滤器就组成了一个过滤器链,请求 ...

  7. eclipse中如何配置maven

    1.首先需要在自己电脑中安装Maven,下载maven的路径:http://maven.apache.org/download.cgi 2.我们把下载好的文件解压到自己电脑的任意一个盘符中去,我的是e ...

  8. 深入ReentrantLock的实现原理和源码分析

    ReentrantLock是Java并发包中提供的一个可重入的互斥锁.ReentrantLock和synchronized在基本用法,行为语义上都是类似的,同样都具有可重入性.只不过相比原生的Sync ...

  9. 浪潮服务器装linux系统无法识别硬盘

    先说无法识别硬盘的原因是没有安装和系统相对应的raid驱动. 公司需要两台Linux的物理服务器来部署业务系统. 客户给了两台浪潮的服务器. 1.先把linux系统刻录到u盘 2要先看一下raid卡的 ...

  10. 敏捷开发流程之Scrum：3个角色、5个会议、12原则

    本文主要从Scrum的定义和目的.敏捷宣言.Scrum中的人员角色.Scrum开发流程.敏捷的12原则等几方面帮助大家理解Scrum敏捷开发的全过程. 一.Scrum的定义和目的 Scrum是一个用于 ...