获取DOM中标签元素的方法
- 1.通过id获取 语法：
var biaoqian1=document.getElementById('标签的id值')
- 2.通过class类名获取 语法:
var lis = document.getElementsByClassName('标签的class值');
返回对应的所有class 值相同的标签 (注意这是一个伪数组，即可以用for循环遍历和简单的索引取出其中的值，但不可以使用数组的方法)
- 3.通过标签名获取元素 返回一个伪数组，里面是匹配的标签,如果没有匹配到 则返回空的伪数组
var lis2 = document.getElementsByTagName('li');
- 4.通过选择器获取第一个元素
// 选择器的写法和css中一样一样的
//返回选择器匹配的第一个元素
//如果选择器匹配不到元素 null
console.log(document.querySelector('#one'));
console.log(document.querySelector('li'));
console.log(document.querySelector('#id'));
- 5.通过选择器获取所有元素
console.log(document.querySelectorAll('li'));
- 6.直接使用标签的id名 不建议直接通过id属性值作为标签元素在js中使用，有时候会有冲突；
操作DOM属性
- 1.设置标签的里面的内容(都是覆盖性的设置,一般使用+=来拼接)
innerText 获取设置标签的文本（不识别html标签）
innerHTML 获取设置标签的超文本(识别html标签)
var div = document.getElementsByTagName('div')[0];
div.innerText = 'thank you'; // 设置文本内容
div.innerText = '<i>thank you</i>'; // 设置文本内容,不会解析HTML标签
div.innerHTML += '<i>thank you</i>'; //使用+=拼接原来的内容，会识别html标签
- 2.设置标签属性(a为获取到的标签元素)
a.getAttribute(属性名) 获取标签的属性值
a.setAttribute(属性名,属性值) 设置标签的属性
a.removeAttribute(属性名) 移除标签的属性 - 3.设置标签的css行内样式
a.style 获取到标签的所有行内样式
a.style.样式名 获取设置标签的行内样式值
(这里的样式名如果碰到类似font-size这种中间带-的，需要替换为fontSize)小驼峰写法 - 4.设置标签的类名
a.className 获取设置标签的类名(也是覆盖性设置)
