JavaScript DOM
DOM概念
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ea92df809f26150773c2d7da07ff5390.png#pic_center)
Element 元素的操作
方法名 | 说明 |
---|
getElementById(id属性值) | 根据id获得一个元素 |
getElementsByTagName(标签名称) | 根据标签名称获得多个元素 |
getElementsByName(name属性值) | 根据name属性获得多个元素 |
getElementsByClassName(class属性值) | 根据class属性获得多个元素 |
子元素对象.parentElement属性 | 获取当前元素的父元素 |
createElement(标签名) | 创建一个新元素 |
appendChild(子元素) | 将指定子元素添加到父元素中 |
removeChild(子元素) | 用父元素删除指定子元素 |
replaceChild(新元素, 旧元素) | 用新元素替换子元素 |
Attribute 属性的操作
方法名 | 说明 |
---|
setAtrribute(属性名, 属性值) | 设置属性 |
getAtrribute(属性名) | 根据属性名获取属性值 |
removeAtrribute(属性名) | 根据属性名移除指定的属性 |
style属性 | 为元素添加样式 |
Text 文本的操作
属性名 | 说明 |
---|
innerText | 添加文本内容,不解析标签 |
innerHTML | 添加文本内容,解析标签 |
JavaScript 事件
常用的事件
事件名 | 说明 |
---|
onload | 某个页面或图像被完成加载 |
onclick | 鼠标单击事件 |
ondblclick | 鼠标双击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onchange | 用户改变域的内容 |
onsubmit | 当表单提交时触发该事件 |
了解的事件
事件名 | 说明 |
---|
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
onkeyup | 某个键盘的键被松开 |
onmousedown | 某个鼠标按键被按下 |
onmouseup | 某个鼠标按键被松开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |
绑定事件
<body>
<button id="btn" 事件名="执行的功能"></button>
</body>
<script>
document.getElementById("btn").事件名 = 执行的功能
</script>
M 元素属性绑定
document.getElementById(“btn”).事件名 = 执行的功能