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的操作方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程