DOM

目录：

1. DOM概念
2. 获取标签对象的三种方式
3. 操作标签对象的内容以及属性
   • 操作内容
   • 操作属性
   • 操作css样式
   • 事件
   • window对象常用方法

DOM概念

DOM ⇒ document Object model (文档对象模型)
DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

回到目录

获取标签对象的三种方式

document.getElementById('id'):
    获取的是单独的对象
    
document.getElementsByClass('class')
    获取的是列表  列表中套对象
    
document.getElementsByTagName('标签名')
    获取的是列表  列表中套对象

操作标签对象的内容以及属性

1. 操作内容

    innerText　　　文本
    innerHTML　　　HTML内容
    value 　　　　　值
   

   示例：

   var obj = document.getElementById('c1')
   obj.innerText
   
   i1.innerText :  获取内容
   "这个是内容"
   i1.innerText = "设置的内容"  设置内容值
   
   i1.innerHTML= "<a href='#'>设置的内容</a>";  设置html标签
   
   获取input系列标签中的value值:
       obj2.value : 既可以设置  也可以获取
   

回到目录

2. 操作属性

    attributes 　　　　　　　　　　　获取所有标签属性
    setAttribute(key,value) 　　　设置标签属性
    getAttribute(key)　　　　　　　获取指定标签属性
    removeAttribute(key)　　　　　删除属性
    type=button:
      disable : 设置是否禁用
   

3. 操作css样式
   大颗粒度的设置:

   style:
       .c2{
           xxxx
       }
       
   js:
       d1.classList.add('c2')  : 添加样式   
       d1.classList
       d1.classList.remove('c2'): 删除样式
   

   细颗粒度的设置:

   对象.style.css的属性 = 值:
   
   两种情况:
   1.
       css: 
           color: red;
       DOM:
           obj.style.color = 'red'
   2. 
       css:
           font-size: 20px;
           background-position-y
           
       DOM:
           obj.style.fontSize = "20px"
   

回到目录

4. 事件

   获得焦点事件——–onfocus
   失去焦点事件——–onblur
   内容改变事件——–onchange
   载入页面———–onload
   单击事件———–onclick
   鼠标移入事件——–onmouseover
   鼠标移出事件——–onmouseout
   

   事件的绑定方式:

   DOM1:
       <input type="text" onclick="f1();" >
   
   DOm2:
       html:
           <input type="text"  id='i1'>
       
       js:
           var obj = document.getElementById('i1')
           obj.onclick = function (){
           console.log("hahaha");
           }
   

5. window对象常用方法：

   alert('1234')
   
   confirm('是否确定删除?');
   
   open(): 打开一个网页
   
   location.href = "资源"  ### 跳转到某一个网页
   
   location.reload(): 刷新当前页面
   

   在特定的时间内, 执行函数

   # 单位为毫秒
   setInterval()  ### crontab
   setInterval("test()", 1000);
   
   setTimout()  ## 只执行一次结束  ## at 
   setTimeout("test()", 1000);  # 1秒后执行test函数
   

回到目录