javascript操作元素的常见方法小结


Posted in Javascript onNovember 13, 2019

本文实例讲述了javascript操作元素的常见方法。分享给大家供大家参考,具体如下:

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:

<script type="text/javascript">
  var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

上面的语句,如果把javascript写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript去页面上获取元素div1的时候,元素div1还没有加载,解决方法有两种:

第一种方法:将javascript放到页面最下边

....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
  var oDiv = document.getElementById('div1');
</script>
</body>

第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了。

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('div1');
  }
</script>
....
<div id="div1">这是一个div元素</div>

获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作选择集里面的标签元素。

<script type="text/javascript">
  window.onload = function(){
    var aLi = document.getElementsByTagName('li');
    // aLi.style.backgroundColor = 'gold'; // 出错!不能同时设置多个li
    alert(aLi.length);
    aLi[0].style.backgroundColor = 'gold';
  }
</script>
....
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

操作元素属性

获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。

操作属性的方法

1、“.” 操作
2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”

通过“.”操作属性:

<script type="text/javascript">
  window.onload = function(){
    var oInput = document.getElementById('input1');
    var oA = document.getElementById('link1');
    // 读取属性值
    var sValue = oInput.value;
    var sType = oInput.type;
    var sName = oInput.name;
    var sLinks = oA.href;
    // 写(设置)属性
    oA.style.color = 'red';
    oA.style.fontSize = sValue;
  }
</script>
......
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="link1">传智播客</a>

通过“[ ]”操作属性:

<script type="text/javascript">
  window.onload = function(){
    var oInput1 = document.getElementById('input1');
    var oInput2 = document.getElementById('input2');
    var oA = document.getElementById('link1');
    // 读取属性
    var sVal1 = oInput1.value;
    var sVal2 = oInput2.value;
    // 写(设置)属性
    // oA.style.val1 = val2; 没反应
    oA.style[sVal1] = sVal2;    
  }
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="link1">传智播客</a>

innerHTML

innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
  window.onload = function(){
    var oDiv = document.getElementById('div1');
    //读取
    var sTxt = oDiv.innerHTML;
    alert(sTxt);
    //写入
    oDiv.innerHTML = '<a href="http://www.itcast.cn" rel="external nofollow" rel="external nofollow" rel="external nofollow" >传智播客<a/>';
  }
</script>
......
<div id="div1">这是一个div元素</div>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
详解JavaScript对象类型
Jun 16 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
Angular 2应用的8个主要构造块有哪些
Oct 17 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
JavaScript同源策略和跨域访问实例详解
Apr 03 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 #Javascript
vue项目中锚点定位替代方式
Nov 13 #Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 #Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 #jQuery
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 #Javascript
jquery获取input输入框中的值
Nov 13 #jQuery
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 #Javascript
You might like
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
PHP面向对象编程快速入门
2006/12/14 PHP
php实现用于计算执行时间的类实例
2015/04/18 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
详解一个小实例理解js原型和继承
2019/04/24 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python闭包思想与用法浅析
2018/12/27 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
大学生社会实践评语
2014/04/25 职场文书
个性婚礼策划方案
2014/05/17 职场文书
爱护公共设施倡议书
2014/08/29 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
毕业生对母校寄语
2015/02/26 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技