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 相关文章推荐
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
原生JS实现列表内容自动向上滚动效果
May 22 Javascript
JS实现放烟花效果
Mar 10 Javascript
vue实现前端列表多条件筛选
Oct 26 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
15个小时----从修改程序到自己些程序
2006/10/09 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
JS Array对象入门分析
2008/10/30 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python列表推导式操作解析
2019/11/26 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
vue常用指令代码实例总结
2020/03/16 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
关于期中考试的反思
2014/02/02 职场文书
低碳环保口号
2014/06/12 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
民事和解协议书格式
2014/11/29 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers