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 相关文章推荐
javascript的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
axios基本入门用法教程
Mar 25 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
深入理解redux之compose的具体应用
Jan 12 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
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
php微信公众平台配置接口开发程序
2016/09/22 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
一个JS的日期格式化算法示例
2013/07/31 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
JS针对Array的各种操作汇总
2016/11/29 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
用python实现面向对像的ASP程序实例
2014/11/10 Python
python中for语句简单遍历数据的方法
2015/05/07 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python使用gensim计算文档相似性
2016/04/10 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python实现京东秒杀功能
2018/07/30 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python爬取豆瓣数据实现过程解析
2020/10/27 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
对标管理实施方案
2014/03/12 职场文书
《学棋》教后反思
2014/04/14 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers