JavaScript中DOM的操作方法
2021/10/31 17:10:20
本文主要是介绍JavaScript中DOM的操作方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、获取元素
document.getElementById() document.getElementsByClassName()[0] document.getElementsByName()[0] document.getElementsByTagName()[0] document.querySelector() document.querySelectorAll()[0]
2、获取内容
alert(a.innerHTML);获取代码和内容,但只显示内容。 alert(a.innerText);提取代码和内容。 alert(a.value); 获取input中的value值。
3、操作属性
a.setAttribute("属性名","属性值"); 添加或更改一个属性。 a.getAtrribute("属性名");获取属性的值。 a.removeAttribute("属性名"); 移除属性。
4、设置样式
var a = document.getElementById("id"); a.style.background-color = "red"; a.style.color = "#fff";
5、元素的创建、添加、删除
var obj = document.createElement('标签名'); a.appendChild(); 向a中添加一个子元素。 a.removeChild();从a中删除一个子元素。 a.selectedIndex 选中的是第几个; a.options[a.selectedIndex] //取出第几个option对象;
6、事件
onclick: 鼠标单击触发 ondblclick: 鼠标双击触发 onmouseover:鼠标移动到上面触发 onmouseout:鼠标离开时触发 onmousemove:鼠标在上面移动时触发 onchange:只要内容改变触发 onblur:失去焦点时触发 onfocus:获得焦点时触发 onkeydown:按键按下时触发 onkeyup:按键抬起时触发 onkeypress: 在用户按下并放开任何字母数字键时发生,但是系统按钮(例:箭头键、功能键)无法识别
7、字符串操作
var s = "hello world"; alert(s.toLowerCase()); 转小写 toUpperCase();转大写 alert(s.substring(3,8)) 从第三个位置截取到第八个位置 alert(s.substr(3,8)); 从第三个位置截取,截取八个字符长度。不写后面数字是截到最后。 s.split('') 将字符串按照指定字符拆开。
8、相关元素操作
var b = a.nextSibling; 找a的下一个同辈元素,注意包含空格。 var b = a.previousSibling, 找a的上一个同辈元素,包含空格。 var b = a.parentNode, 找a的上一级父级元素。 var b = a.firstChild, 第一个元素; lastChild 最后一个; childNodes[n]找第n个;
这篇关于JavaScript中DOM的操作方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-30我的第一个Go命令行工具
- 2024-09-30初学者指南:轻松掌握模块化编程
- 2024-09-30顶级5款免费的IntelliJ插件,助你Java开发之路更顺畅
- 2024-09-30提高应用程序可用性:冗余和持久性
- 2024-09-30Twitter 系统设计面试示例
- 2024-09-30JSON对象入门教程:轻松掌握基础用法
- 2024-09-30封装入门:Java面向对象编程的第一步
- 2024-09-30后台交互入门:轻松掌握基础知识与实践技巧
- 2024-09-30轻松入门:后台交互教程详解
- 2024-09-30后台交互项目实战:新手指南