<!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. Delphi中的Val函数和iif函数（出错的时候，会有索引值）

    在delphi中Val是一个将字符串转换为数字的函数,Val(S; var V; var Code: Integer)第一个参数是要转换的字符串,第二个参数存放转换后的数字,可以是整数或浮点数,第三个 ...

  2. windows下Qt编译Qtxlsx库和qtxlsx库的使用方法

    最近接了个项目,合作的学长让用Qt写,而其中最重要的需求是将数据库的数据写入excel表格中和将excel的数据导入到数据库中,自己查阅了和多资料,最后决定使用qtxlsx开源库来操作excel,在编 ...

  3. iOS @property、@synthesize和@dynamic

    @property @property的本质: @property = ivar(实例变量) + getter/setter(存取方法); 在正规的 Objective-C 编码风格中,存取方法有着严 ...

  4. python知识点总结02(不定时更新)

    请用至少两种方式实现m与n值交换m=10,n=5 # 方式一 temp = 0 m = 10 n = 5 print(f'方式一交换前,m:{},n:{}') temp = m m = n n = t ...

  5. callback、promise和async、await的使用方法

    callback 回调是一个函数被作为一个参数传递到另一个函数里,在那个函数执行完后再执行.通俗的讲就是 B函数被作为参数传递到A函数里,在A函数执行完后再执行B. promise Promise 是 ...

  6. 互联网 Java 工程师进阶知识完全扫盲

    互联网 Java 工程师进阶知识完全扫盲:https://github.com/doocs/advanced-java

  7. 【题解】P3645 [APIO2015]雅加达的摩天楼(分层图最短路)

    [题解]P3645 [APIO2015]雅加达的摩天楼(分层图最短路) 感觉分层图是个很灵活的东西 直接连边的话,边数是\(O(n^2)\)的过不去 然而我们有一个优化的办法,可以建一个新图\(G=( ...

  8. SpringBoot原理分析与配置

    1.1 起步依赖原理分析 1.1.1 分析spring-boot-starter-parent 按住Ctrl点击pom.xml中的spring-boot-starter-parent,跳转到了spri ...

  9. Atlas 读写分离

    1.前置条件 需要配置好mysql 主从 主库:192.168.28.137:16205 从库:192.168.28.135:16205 Atlas:192.168.28.139 2.Atlas 部署 ...

  10. leetcode.310最小高度树

    对于一个具有树特征的无向图,我们可选择任何一个节点作为根.图因此可以成为树,在所有可能的树中,具有最小高度的树被称为最小高度树.给出这样的一个图,写出一个函数找到所有的最小高度树并返回他们的根节点. ...