DOM 1. 操作元素
2020-03-28 本文已影响0人
goodcwj
黑马学习笔记
元素选择
- 老的方式
document.getElementByXXX
返回元素数组 - 新的方式
直接传入selector。 这里的selector是CSS的tag, className, id等selector。
document.querySelector('selector')
返回第一个元素
document.querySelectorAll('selector')
返回满足条件的数组
事件
- onblur, onfocus 失去焦点，获得焦点
- 鼠标经过 onmouseover, 鼠标离开onmouseout
element.onclick = function(){} function里面的this是element
操作元素
- 操作元素内容
- innerText, innerHTML改变元素内容
- 操作常见元素属性
- src, href
- 操作表单元素属性
- id, alt, title
- 操作元素样式属性
- style操作
- display: none, block
- background, background-position( 精灵图示例）
- element.className='first second'
- 通过修改className进行多样式调整
- 多className, second里面的样式覆盖fist中的重复的样式
- 自定义属性的操作
目的是保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
- element.属性， element.属性= 值
获取内置属性- element.getAttribute('属性')， element.setAttribute('属性', '值')
获取用户自定义属性，当然它也可以获取内置属性- 对于class属性，使用的是class而不是className
- removeAttribute
element.removeAttribute('属性')
- H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
<div data-index='20'/>
- 兼容性获取element.getAttribute('data-index')
- H5新增element.dataset.index或者element.dataset['index']
- 驼峰命名法，如果自定义为'data-list-name'， 则使用element.dataset.listName来获得'data-list-name'
- elemnet.innerText
从起始位置到终止位置的内容，但它去除html标签，同时空格换行也去掉 - element.innerHTML
起始位置到终止位置的全部内容，包括html标签，同事保留空格和换行
innerHTML是W3C标准，innerText是IE发起的，老版本的火狐不支持
innerText和innerHTML都是可读可写的
innerHTML用的较多
元素属性
- alt属性
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
表单元素的属性操作
利用DOM可以操作如下表单元素的属性
type, value, checked, selected, disabled
- 表单里面的内容是通过修改value来改变的
示例
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
样式属性操作
- element.style 行内样式操作
- element.className 类名样式操作
注意
示例
<html>
<head>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div/>
<script>
var div = document.querySelector('div');
div.onclick=function(){
this.style.backgroundColor = 'purple';
this.style.width='250px';
}
</script>
</body>
