前端学习-Dom基础知识

在掌握JavaScript基础语法后，紧接着就应该学习DOM技术。
DOM全称为Document Object Model，作为处理HTML文档的标准编程接口。
众所周知JavaScript是一种通用的网络脚本语言，并不能直接对HTML文档进行编辑。
而通过 DOM 我们能够访问并操作所有HTML元素及其属性，并对其进行修改、添加或删除。
DOM技术作为跨平台的技术标准可用于Java、JavaScript、VBScript等多种编程语言。

找到标签

• 获取单个元素

     document.getElementById('i1')

• 获取多个元素（列表）

    document.getElementByTagName('div')

• 获取多个元素（列表）

    document.getElementByClassName('c1')

a.直接找

document.getElementById("id") // 通过ID属性获取指定的一个或多个HTML元素
document.getElementsByName(name) // 基于name属性筛选出所有具有相同名称的HTML元素
document.getElementsByClassName(className) // 基于class属性筛选出所有具有相同分类标记的HTML元素
document.getElementsByTagName(tag) // 通过特定tag名称筛选出与当前类相关的HTML标记元素

b.间接找

tag=document.getELementById（‘i1’）

父节点元素标签，
所有子节点标签，
第一个子节点元素，
最后一个子节点元素，
下一个兄弟节点标签，
上一个兄弟节点标签

操作标签

文件内容操作：

提取指定标签内的全部文字内容：
通过document.getElementById方法获取id为xx的标签对象，并将其赋值给变量tag；
从文档中定位出具有id属性值为xx的标签元素，并将其赋值给局部变量tag；
将该元素节点的内容属性值赋值给变量contenten；

对标签内部文本进行重新赋值
标签.innerText=""

主要区别在于内HTML不仅可以获取文本内容还可以连带标签一起获取

值
input 标签用于获取用户的输入信息。
select 标签用于获取已选择选项的具体信息（通过 selectindex 属性）。
testarea 用于获取用户的输入信息。

对样式进行操作

对整体样式进行修改

className
classList
classList.add //用于添加样式
classList.remove //用于删除样式

对单个样式进行修改

• style
  .style.color
  .style.fontSize
  …

属性操作

     .setAttribute('属性名'，'所赋值')  在某个标签内添加属性
     .removeAttribute('属性名')  删除某个标签内的某个属性
     .attributes  显示所有的属性

创建标签，并添加到HTML中

a.字符串形式
b.对象的方式
document.createElement(‘标签名’)

表单提交方式

1.input标签提交

    <form action="网址">
          <input type="text"/>
          <input type="submit" value="提交"/>
    </form>

2.利用JavaScript进行提交(任何标签都可以)

      <form  id="f1"action="http://www.oldboyedu.com">
            <a onclick="submitForm（）；"〉提交吧</a>
            </form>
            <script>
            function submitFormO{
            document.getElementById（'f1'）.submit）
            </script>

其它：

alert(): 在执行过程中会引发阻塞，在弹出对话框显示内容；若选择确定后才继续执行。仅返回字符串类型的数据；若输入的对象类型，则会调用toString()方法转换为字符串。不允许传递多个参数；只会返回第一个提供的参数值。
console.log(): 无阻塞地在控制台显示内容。适用于各种数据类型的显示。允许多个参数供其处理。
console.info 常用于显示提示消息。
当发生错误时使用 console.error。
在特定条件下触发 console.warn。
用来进行调试操作的 console.debug。

var v = confirm('信息'); // 提示对话框
console.log(v); // 显示返回结果（当点击确认时，则显示真值；取消后则显示假值）

返回当前的URL地址。
等于当前URL地址，并且重载页面以重新加载内容。

定时器

• setInterval

       setInterval(function(){
            
        },时间)  //每隔一段时间执行一次

learInterval 删除定时器

• setTimeout

    setTimeout(function(){
        
    },时间) 隔一段时间后执行，且只执行一次

clearTimeout 删除定时器

事件

    onclick，onblur，onfocus
    onmouseover 
    onmouseout

绑定事件的两种方式：
a.直接标签绑定

    <input type="submit"  onclick="func()"/>

b.先获取Dom对象，然后进行绑定

    document.getElementById('xx').onclick
    document.getElementById('xx').onfocus

this,当前触发事件的标签
a.第一种绑定方式

    <input type='button' onclick='ClickOn(this)'>
    
    <script>
    function ClickOn(ths){
    var mybq=ths;//ths代指当前点击的标签
    ......
    }
    </script>

b.第二种绑定方式

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

一种特殊的事件绑定方式

    <input id='i1' type='button'/>
    
    <script>
    var myid=document.getElementById('i1');
    myid.addEventListener('click',function(){console.log('aaa')},false)
    myid.addEventListener('click',function(){console.log('bbb')},false)
    </script>

点击后同时触发两种事件

词法分析

函数在调用时分成两个阶段第一个是词法分析阶段，第二个是执行阶段

    function t1(age){
    console.log(age); //function age(){}
    var age=36;
    console.log(age);//36
    function age(){}
    console.log(age);//36
    }
    
    t1(3);

在词性分析阶段会生成一个活动对象active object（AO），它将依次解析函数内部的形式参数、局部变量以及函数声明表达式（其中函数声明表达式的优先级最高）。

在上述实现中，在词性解析阶段首次识别到了形式参数 named "age"。此时其当前值被设定为 undefined。随后它接收到了一个实际参数 value of 3；因而其值更新为 3。随后，在该函数体内重新声明了一个局部变量 named "age"；由于词性解析阶段本身不会执行任何代码；所以新声明的年龄变量初始值仍设为 undefined。紧接着又声明了一个命名为 "age" 的 function 类型对象；因为该对象在语法优先级上位于其他表达式之上；所以它的类型也被确定为此处所指的对象类型。紧接着将年龄字段赋值为 36，则第二次 console.log 输出的结果是 36.由于该 function 没有被调用就跳过了流程；最终，在最后一次 console.log 操作时得到的结果仍然是 36。