DOM 基础

文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法

查找

直接查找

    var obj = document.getElementById('i1')

间接查找

操作

文件内容操作

innerText 仅仅获取文本
innerHTML 获取全部内容
示例：

<body>
<div id="i1">Welcome <span>to </span>my site</div>
<script>
    var tag_list = document.getElementsByTagName("div"); //返回值为列表
    console.log(tag_list[0].innerText);
    console.log(tag_list[0].innerHTML);
</script>

执行结果：

Welcome to my site
Welcome <span>to </span>my site

value

input 获取/改变当前标签中的值
select 获取/改变选中的value值
textarea 获取/改变当前标签中的值
输入框示例：

<body>
<input type="text" id="i1" value="请输入内容">
<script>
  function Focus(){
      if(this.value==="请输入内容"){
          this.value = "";
      }
  }
  function Blur(){
      if(this.value.length===0){
          this.value = "请输入内容";
      }
  }
  var myTag = document.getElementById('i1');
  myTag.onfocus = Focus;
  myTag.onblur = Blur;
</script>
</body>

样式操作

通过对 class 进行操作来修改样式
- obj.className(以字符串形式获取对象的class名)
- obj.classList(以列表形式获取对象的class名)
  - classList.add
  - classList.remove
直接修改/添加 style 中的样式
- obj.style.fontSize = '16px';

属性操作

obj.attributes              // 获取所有属性
obj.getAttribute('key')     // 获取指定key的value
obj.setAttribute('key', 'value')    // 修改制定key的value
objremoveAttribute('key')   // 移除指定的key

创建标签

- 字符串形式
    var tag = '<div></div>';
- 对象的方式
    document.createElement('div')

示例：

<body>
<div id="i1">
    <p>
        <input type="button" onclick="add_ele1()" value="+"/>
        <input type="button" onclick="add_ele2()" value="+"/>
    </p>
    <p>
        <input type="text" style="background-color: black"/>
    </p>
</div>
<script>
    // 通过字符串方式创建新标签
    function add_ele1(){
        var tag = '<p><input type="text"/></p>';
        document.getElementById('i1').insertAdjacentHTML('beforeend',tag);
    }
    // 通过对象的方式创建新标签
    function add_ele2(){

        var tag = document.createElement('input');  // 创建一个 input 标签
        tag.setAttribute('type','text');            // 设置标签属性
        tag.style.backgroundColor='red';            // 设置标签样式
        var p = document.createElement('p');        // 创建一个 p 标签
        p.appendChild(tag);                         // 将 tag 标签添加到 p 标签中
        document.getElementById('i1').appendChild(p);// 将 p 标签添加到id='i1'的标签中
    }
</script>
</body>

提交表单(任何标签通过DOM都可以提交表单)

document.getElementById('form').submit

其他

console.log()                                 //输出框
alert()                                       //弹出框
var v = confirm('提示信息')                   //确认框(return：v = true/false)
location.href                                 //获取当前URL
location.href = ‘’                            //重定向、跳转
location.reload == location.href = location.href    //页面刷新
var obj = setInterval(function(){},1000)      //设置定时器
clearInterval(obj)                            //清除定时器
setTimeout(function(){},1000)                 //只执行一次的定时器
clearTimeout                                  //清除定时器

事件

绑定事件两种方式：

直接在标签绑定

<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(self){
// self:当前点击的标签
}

先获取DOM对象，然后进行绑定

只能绑定一个

<input id='i1' type='button'>
document.getElementById('i1').onclick = function(){
// this：当前点击的标签
}

可以绑定多个

input id='i1' type='button'>
document.getElementById('i1').addEventListener('click',function(){},false)
document.getElementById('i1').addEventListener('click',function(){},false)
// false:冒泡 true:捕捉 默认为false

关于冒泡、捕捉

onclick点击时
onblur光标移除时
onfocus获取光标时

词法分析

示例：

function func(age){
    console.log(age);
    var age = 27
    console.log(age);
    function age(){}
    console.log(age);
}
func(3);

执行结果：
function age(){}
27
27

函数调用前生成AO(active object)
分析顺序：

1.形式参数
2.局部变量
3.函数生成表达式

过程：

1.形式参数
AO.age = undifined
AO.age = 3
2.局部变量
AO.age = undifined(没有执行函数，没有赋值)
3.函数生成表达式
AO.age = function()

查找

直接查找

间接查找

操作

文件内容操作

样式操作

属性操作

创建标签

提交表单(任何标签通过DOM都可以提交表单)

其他

事件

绑定事件两种方式：

词法分析

猜你喜欢