JavaScript原生态获取DOM对象,获取属性值以及设置属性值

一.获取DOM对象(标签,元素,节点)的三种方法

1.document.getElementById();   根据元素的id获取当前的标签

例如

<p id="demo"></p

document.getElementById('demo');获取ID为demo的元素

 

2.document.getElementsByTagName();根据元素的标签获取当前的标签,

例如

<li></li>

<li></li>

<li></li>

var oDom = document.getElementsByTagName('li')

注意,该方法返回的是一个数组,即oDom .length == 3,

3.document.getElementsByClassName();根据元素的类名获取当前的标签,

注意: 这是HTML5 DOM中新增的一个方法,所以某些DOM可能还无法实现,且该方法和

document.getElementsByTagName()方法都是返回的一个数组.

二.获取DOM对象(标签,元素,节点)的三种方法

1. getAttribute(attribute)获取属性值,需要配合上述三种方法使用,即就是先找到这个元素,再获取

当前元素的属性值

例如:

<div id="demo" data="123"></div>

var oDom = document.getElementById('demo');
    var value = oDom.getAttribute('data');
    console.log(value);  ///输出 123

2. setAttribute(attribute,value)设置相应属性的属性值,

例如:

<div id="demo" data="123"></div>

var oDom = document.getElementById('demo');
    oDom.setAttribute('data',456);   //设置属性data的值为  456
    var value = oDom.getAttribute('data',456);
    console.log(value);///输出 456