<!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. Find工具

    Find工具主要用于操作系统文件.目录的查找, 1.语法参数格式为: Find工具的语法格式:find path(路径) -option(参数) action(动作): PATH路径:可以任意路径.绝 ...

  2. [译] 重新思考 1 号进程 / Rethinking PID 1

    By Lennart Poettering 译 SReadFox 原文链接:http://0pointer.de/blog/projects/systemd.html 译注:笔者大约在 2011 年读 ...

  3. 在Android上为所欲为的一些技术

    https://www.jianshu.com/p/87ce6f565d37Android JNI(一)——NDK与JNI基础 https://www.android-doc.com/guide/co ...

  4. HRegion 分配与寻址

    1.Region 分配   HMaster负责为Region 分配Region Server,一个Region 只能分配给一个Region server. HMaster中 记录:   哪些Regio ...

  5. Java图形打印 上下对称三角星

    记录记录 @Test public void name03() { int row = 9; for (int i=0,k=row,m=0;i< row;i++){ for(int l=m-i; ...

  6. Java泛型类特性

    在2004年末Java推出了Java5,其中提供了对泛型方法和类的支持,也围绕着泛型推出了一下特性,本章将对Java泛型进行综合的概括 1.泛型特性构件pre-Java 5 1.使用Object表示泛 ...

  7. Java实现上传文件到指定服务器指定目录

    前言需求 使用freemarker生成的静态文件,统一存储在某个服务器上.本来一开始打算使用ftp实现的,奈何老连接不上,改用jsch.毕竟有现成的就很舒服,在此介绍给大家. 具体实现 引入的pom ...

  8. 10_时间戳timeStamp 和 时间 time 转换, 根据时间节点倒计时

    1: 时间戳 timeStamp 获取的几种方法及其优劣, 第一种只能精确到秒, 故不推荐使用, 最最常用的也是最官方的是第三种, 通过原型方法进行调用获取精确到毫秒数 : var timestamp ...

  9. Docker+Nginx使用流程（笔记）

    Docker+Nginx使用流程 本教程依据个人理解并经过实际验证为正确,特此记录下来,权当笔记. 注:基于linux操作系统 # uname -r 查看你当前的内核版本 # yum -y insta ...

  10. axios封装的拦截器的应用

    axios拦截器   页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者 ...