DOM

Posted 2020-08-15 小蚊子飞

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM相关的知识，希望对你有一定的参考价值。

一. DOM对象（文档对象模型）

html DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

1. 属性

document.title //返回当前文档的标题
document.URL 返回文档完整的地址
document.bgColor背景色
document.fgColor

代码：

 console.log(document.title);
 console.log(document.URL); document.URL = ‘http://www.baidu.com‘ console.log(document.URL);   //并没有跳转，返回当前页面的地址 location.href = ‘http://www.baidu.com‘  //页面跳转到百度页面

注意:location.href是可以赋值baidu的网址的，document.URL不行

2.方法

2.1 document.getElementById(‘‘) 通过id来获取元素

定义与用法：

返回对拥有指定ID的第一个对象的引用
如果乜有指定ID的元素返回undefined

2.2 document.getElementsByTagName(‘‘) 通过标签名来获取一些元素返回值时元素（对象）集合，并不是数组

定义与用法：

返回带有指定标签名的对象的集合
参数*的返回文档时所有元素
返回的集合对象拥有length属性，并且可以通过index来访问集合中的元素

注意：对象集合拥有和数组类似的结构，但是不具备数组类型的对象才拥有的方法

2.3 document.getElementByName(‘userName‘)

定义与用法：

返回文档中所有指定名称的对象的集合
返回的集合对象拥有length属性，并且可以通过index来访问集合中的元素
存在兼容性问题（该方法用于表单操作） IE浏览器中，如果name存在于form表单中，可以正常使用，但是如果出现在比如div中，则不能返回正常值。原因：name并不是div的标准值属性

2.4 document.getElementByClassName(‘‘) //注意在低版本的IE浏览器不支持本方法

定义与用法：

返回文档中所有指定名称的对象的集合
返回的集合对象拥有length属性，并且可以通过index来访问集合中的元素
IE浏览器并不支持 ---兼容性问题

解决：

function getElesByClassName(className) {
var arr = [];if(document.getElementsByClassName) {    return document.getElementsByClassName(className);} else {    var tags = document.getElementsByTagName("*");    for(var i = 0; i < tags.length; i++) {        if(tags[i].className == className) {            arr.push(tags[i]);        }    }    return arr; }}
 

源生的与自己定义的区别：

自己手写的，需要每个标签都去匹配一下，性能不好
返回值不同：自己写的，返回的就是一个数组，源生的返回的是对象集合

补充：可以改变input标签的属性：

两种方法来获取：

通过dom对象的同名属性来获取：

console.log(input.placeholder);

通过调用dom对象的getAttribute()方法来调取 console.log(input.getAttribute(‘placebolder‘));

这两种获取属性方式的区别：

对于文本框的value属性，同名属性获取的是当前的值，getAttribute()获取的是初始的值
如果要获取标签的class属性的值：同名属性对应的属性名是className,
如果要获取非标准属性(自己定义)，只有getAttribute才能获得，同名属性只能返回undefined,

练习一：通过一个按钮来控制div的颜色等属性

 
  var div = document.getElementById(‘box‘);
  var btn = document.getElementById(‘btn‘);?  btn.onclick = function(){

div.style.backgroundColor = ‘red‘;

};

练习二：让一个div的背景颜色每隔一秒在绿色和红色之间切换

  var div = document.getElementById(‘box‘);
  var isGreen = true;  btn.onclick = function(){  if(isGreen){    div.style.backgroundColor = ‘red‘;    isGreen = false;  }else{    div.style.backgroundColor = ‘green‘;    isGreen = true;  } }setInterval(btn.onclick,1000);
 

练习三：设置10个div,每点击一次颜色转变，每个div互不干扰

 
 var containerDiv = document.getElementById(‘container‘);
 var listOfDiv = container.getElementsByTagName(‘div‘); for (var i = 0; i < listOfDiv.length; i++) { //给每个div的dom对象，添加一个自定义属性，用来保存当前是否是绿色  listOfDiv[i].isGreen = true;  listOfDiv[i].onclick = function() {    //根据dom对象的isGreen这个自定义属性，判断当前的颜色    if (this.isGreen) {        this.style.backgroundColor = ‘red‘;        this.isGreen = false;    } else {        this.style.backgroundColor = ‘green‘;        this.isGreen = true;    }  }//这个函数执行的时机//当点击事件发生的时候，浏览器去执行listOfDiv[i],.onclick();}