前端学习-Dom基础知识

在学完JavaScript的简单语法之后，接下来就应该学习Dom。
Dom全称为Document Object Model，是一种用于HTML的编程接口。我们都知道JavaScript是一种浏览器脚本语言，但是它并没有办法直接修改HTML文档的内容，这就需要Dom（文档对象模型），通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

找到标签

• 获取单个元素

 document.getElementById('i1')  

• 获取多个元素（列表）

document.getElementByTagName('div')  

• 获取多个元素（列表）

document.getElementByClassName('c1') 

a.直接找

document.getElementById //根据ID获取一个标签
document.getElementsByName //根据name属性获取标签集合
document.getElementsByClassName // 根据class属性获取标签集合
document.getElementsByTagName //根据标签名获取标签集合

b.间接找

tag=document.getELementById（‘i1’）

tag.parentELement //父节点标签元素
tag.children //所有子标签
tag.firstElementChild //第一个子标签元素
tag.lastElementChild //最后一个子标签元素
tag.nextELementtSibling //下一个兄弟标签元素
tag.previousElementSibling //上一个兄弟标签元素

操作标签

文件内容操作：

• innerText
  获取标签中的文本内容
  var tag=document.getElementById(‘xx’);
  索取到id为xx的标签，并定以局部变量接受
  var conten=tag.innerText;
  获取标签内部的内容

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

• innerHTML
  用法与innerText相同，不同的是innerHTML不仅可以获取文本内容，还可以连带标签一起获得

• value
  input标签 value获取当前用户输入的值
  select标签 获取选中的选项所对应的value值（selectindex）
  testarea value获取当前用户输入的值

对样式进行操作

对整体样式进行修改

• 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():
对代码运行有阻塞作用，在弹出框输出，不点击确定，后续代码无法继续执行
alert()只能输出string,如果alert输出的是对象会自动调用toString()方法
alert不支持多个参数的写法,只能输出第一个值
console.log():
对代码运行无阻塞作用，在打印台输出
可以打印任何类型的数据
支持多个参数的写法
console.log 用于输出普通信息
console.info 用于输出提示性信息
console.error用于输出错误信息
console.warn用于输出警示信息
console.debug用于输出调试信息

var v=confirm(‘信息’) //确认框
console.log(v); //获取返回值（在确定时，v的值是true，取消是，v的值为false）

location.href 获取当前网址
location.href=location.href<==>location.reload() 刷新

定时器

• 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），它会依次分析函数内的形式参数，局部变量，函数声明表达式（优先级最高）

在上面的函数中，在词性分析阶段首先发现了形式参数age，此时age的值为undefined,接着它得到了一个实际参数3，因此age值变为3，接下来函数中重新定义了一个局部变量age，因为在词性分析阶段并不执行代码，所以新定义的age，它的值为undefined，紧接着下面又申明了一个名为age的function函数，因为函数表达式拥有最高的优先级，因此，age又变为function()函数，因此最终在函数执行阶段，第一个console.log(age)是function(),接着给age赋值36，因此第二个console.log(age)是36,接着函数function因没有调用直接跳过，所以最后一个console.log(age)依旧为36