好资源导航 » 文章资讯 » javascript操作元素的常见方法小结

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

2023-08-09 10:45:05 63

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

获取元素方法一

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


varoDiv=document.getElementById('div1');

....
这是一个div元素

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

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

....
这是一个div元素

.... varoDiv=document.getElementById('div1');

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


window.onload=function(){
varoDiv=document.getElementById('div1');
}

....
这是一个div元素

获取元素方法二

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


window.onload=function(){
varaLi=document.getElementsByTagName('li');
//aLi.style.backgroundColor='gold';//出错！不能同时设置多个li
alert(aLi.length);
aLi[0].style.backgroundColor='gold';
}

....

1
2
3
4
5
6

操作元素属性

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

操作属性的方法

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

属性写法

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

通过“.”操作属性：


window.onload=function(){
varoInput=document.getElementById('input1');
varoA=document.getElementById('link1');
//读取属性值
varsValue=oInput.value;
varsType=oInput.type;
varsName=oInput.name;
varsLinks=oA.href;
//写(设置)属性
oA.style.color='red';
oA.style.fontSize=sValue;
}

......

传智播客

通过“[]”操作属性：


window.onload=function(){
varoInput1=document.getElementById('input1');
varoInput2=document.getElementById('input2');
varoA=document.getElementById('link1');
//读取属性
varsVal1=oInput1.value;
varsVal2=oInput2.value;
//写(设置)属性
//oA.style.val1=val2;没反应
oA.style[sVal1]=sVal2;
}

......


传智播客

innerHTML

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


window.onload=function(){
varoDiv=document.getElementById('div1');
//读取
varsTxt=oDiv.innerHTML;
alert(sTxt);
//写入
oDiv.innerHTML='传智播客';
}

......
这是一个div元素

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

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐