javascript实战.png
1、查找搜索选择器 - 获取对象DOM
id => document.getElementById('test'); //唯一
class类名 => document.getElementByClassName('class'); //数组 运用 [ 0 ] 或者 for
标签名 => document.getElementByTagName('div'); //数组 运用 [ 0 ] 或者 for
统一查找 => document.querySelectorAll('#test div'); //数组 运用 [ 0 ] 或者 for
2、查找搜索选择器 - 获取对象DOM
- 注册事件 绑定事件
- 行内注册事件
- 行内注册事件
btn.onclick = function (){
alert("这是另一个按钮的事件被触发了。。。");
}
onclick的点击事件写在js里面
```
- 内嵌注册事件
```
<input type="button" value="更改" onclick = "alert('弹出一个警示框');"/>
直接在html写onclick
```
- 事件方式
onclick
onload
onchange
onclick
onkeydown
onmousedown
onsubmit
...
3、div属性操作key:value
哪些是属性呢？下面所示：
<input type="text" id="txt" class='test' value="这是一个默认的值。。。"/>
=> type="text" id="txt" class='test' value="这是一个默认的值。。。" 都可以处理
<a href="images/2.jpg" id="a2" >
=> href="images/2.jpg" id="a2"
两种方法获取
document.getElementById('id').type; //text 对象获取方式
document.getElementById('a2').getAttribute('href') //images/2.jpg 运用getAttribute获取方式
两种方法赋值
document.getElementById('id').type = 'button'; // 对象赋值方式
document.getElementById('a2').setAttribute('images/112.jpg') // 运用setAttribute获取方式
很多都是从属性的方法引生过去的
比如
获取 style => div.style.height class名字 => div.class
4、div.innerText文本操作
-
获取文本 innerText
document.getElementById('id').innerText; -
赋值文本
document.getElementById('id').innerText = '新的文本'
5、div.style样式操作
-
获取样式
1. div.style.height 2. window.getComputedStyle(mydiv , null)['height']; -
赋值样式
div.style.height = '100px';
6、div.class名字操作className
-
获取方式
1.div.getAttribute('class') -
赋值方式
1.box.className = "box"; 多个用空格隔开 box.className = "box main"; 2.box.setAttribute('class','box') 多个用空格隔开('class','box main')
