javascript 实战基础

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

1. 注册事件 绑定事件
   • 行内注册事件

btn.onclick = function (){
alert("这是另一个按钮的事件被触发了。。。");
}
onclick的点击事件写在js里面
```
- 内嵌注册事件

   ```

<input type="button" value="更改" onclick = "alert('弹出一个警示框');"/>
直接在html写onclick
```

2. 事件方式

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')