<!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. mysql5.7密码修改与报错分析

    1.修改密码 修改密码: vim /etc/my.cnf 的mysqld字段加入skip-grant-tables 重启MySQL,service mysqld restart 终端输入 mysql ...

  2. neo4j-查询示例

    查找名为"Cloud Atlas"的电影 match(cloudAtlas {title:"Cloud Atlas"}) return cloudAtlas 查 ...

  3. Linux命令之nohup 和 重定向

    用途:使运行的程序忽略SIGHUP. 语法:nohup Command [ Arg ... ] [ & ]描述:nohup 命令运行由 Command 参数和任何相关的 Arg 参数指定的命令 ...

  4. kubernetes实战(三十)：CentOS 8 二进制 高可用 安装 k8s 1.17.x

    1. 基本说明 本文章将演示CentOS 8二进制方式安装高可用k8s 1.17.x,相对于其他版本,二进制安装方式并无太大区别. 2. 基本环境配置 主机信息 192.168.1.19 k8s-ma ...

  5. CodeForces - 559C

    学到了学到了,逆元求组合数还有贼神仙的计数DP 太强了! 难受啊

  6. JavaScript之DOM操作，事件操作，节点操作

    1,DOM操作 1.1  概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...

  7. shopnc 二次开发问题（一）

    1.关于shopnc商品详情页面多规格抢购,价格显示都是显示的抢购价格问题 路径: data/model/groupbuy.model.php 方法:getGroupbuyInfoByGoodsCom ...

  8. [MySQL实践] 实践记录

    [MySQL实践] 实践记录 版权2019.5.17更新 MySQL MySQL各版本区别 一.选择的版本 1. MySQL Community Server 社区版本,开源免费,但不提供官方技术支持 ...

  9. 05_jquery 操作table使tr(数据)整行上移下移

    1:ajax请求数据到页面 function GetWorkSpaceList() { GetServerData("get", GetEnterpriseUrl() + &quo ...

  10. 关于opengl中的矩阵平移，矩阵旋转，推导过程理解 OpenGL计算机图形学的一些必要矩阵运算知识

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12166896.html 为什么引入齐次坐标的变换矩阵可以表示平移呢? - Yu Mao的回答 ...