JavaScriptDOM(document)对象

DOM介绍

1. DOM:Document Object Model 文档对象模型

   2. 要实现网页的动态交互夏鸥哦,bom操作远远不够需要操作html才是核心.如何操作htm,就是DOM.简单的说,dom提供了程序动态控制html接口,DOM即文档对象模型描绘了一个层次化的节点数,运行开发人员添加,移除和修改页面的某一部分.dom处于javascript的核心地位上
   3. 每个载入浏览器的HTML文档都会成为Document对象,Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问.Document对象是Window对象的一部分,可通过window.document属性对其进行访问.

节点

1. 整个html文档 文档节点

   2. 文件中的所有标签 元素节点
   3. 标签的属性 属性节点
   4. 标签中的文本 文本节点
   5. 注释 注释节点

预加载事件:

1. 等文档中的元素及资源加载完毕后才执行的时间

   window.onload=function(){
   
   }
   

   2. 在body标签上写onload时间

   3. html代码从上往下执行,当获取的元素写在dom元素之前时,代码还未走到dom元素,此时无法找到dom对象,会返回null

获取节点

1. getElementById() 根据id获取dom对象,如果id重复,那么以第一个为准

   function testById(){
   	var p1=document.getElementById("p1");
   	console.log(p1);
   }
   

2. getElementsByTagName() 根据标签名获取dom对象数组

   function testByTagName(){
       var inputs=document.getElementsByTTagName("input");
       console.log(inputs.length);
   }
   

3. getElementsByClassName() 根据指定类名获取dom对象数组

   function testByClass(){
       var cls=document.getElementsByClassName("para");
       console.log(cls);
   }
   

4. getElementsByName() 根据那么属性值获取dom对象数组,当用于多选获取值

   function testByName(){
       var uname=document.getElementsByName("hobby");
       console.log(hobbys);
   }