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个；

标签：触发,元素,DOM,操作方法,JavaScript,alert,var,document,属性
来源： https://blog.csdn.net/qq_57606640/article/details/121065658