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 相关文章推荐
Jquery刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
2015/09/06 Javascript
Javascript缓存API
2016/06/14 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
AngularJS改变元素显示状态
2017/04/20 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Javascript摸拟自由落体与上抛运动原理与实现方法详解
2020/04/08 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python可视化实现KNN算法
2019/10/16 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
在python3中实现更新界面
2020/02/21 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
2013年高中生自我评价
2013/10/23 职场文书
个人简历中自我评价
2014/02/11 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2015年公司工作总结
2015/04/25 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android