js中的元素

元素的获取方式

1. 根据 id 获取 getElementById

<div class="box" id="box">1111</div>
<div class="box02" name="box02">2222</div>

var box = document.getElementById('box')

2. 根据class属性获取元素 getElementsByClassName
   通过class属性获取得到的是元素集合

var boxes = document.getElementsByClassName('box')
console.log(boxes[0],typeof(boxes[0]));

3. 根据name属性获取元素 getElementsByName

var boxes = document.getElementsByName('box02');
console.log(boxes,typeof (boxes));

4. 根据标签获取元素 getElementsByTagName

var boxes = document.getElementsByTagName('div');
console.log(boxes, typeof(boxes));
console.log(boxes[0], typeof(boxes[0]));

5. 了解
   querySelector： 获取单个元素
   querySelectorAll： 获取到的结果是类似于列表的对象

var box = document.querySelector('.box');
var box = document.querySelector('#box');
console.log(box, typeof(box));

var boxes = document.querySelectorAll('.box');
console.log(boxes, typeof(boxes));
console.log(boxes[0], typeof(boxes[0]));

获取元素，添加属性样式

// 1 获取div标签对象
var box = document.getElementById('box');
// 2 给div对象设置属性
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';

操作元素

getAttribute(‘src’)	获取属性
setAttribute(‘aaa’, ‘属性的值’)	新增属性/修改属性
removeAttribute(‘aaa’)	删除属性

// 1. 获取图片标签/元素
var img = document.getElementById('img');
// //1.1获取属性
console.log(img.getAttribute('src'));  //相对路径
console.log(img.src);
//1.2新增属性/修改属性
img.setAttribute('aaa', '新增的属性aaa');
img.setAttribute('src', './images/3.jpg');
//1.3删除属性
img.removeAttribute('aaa');
console.log(img);  // 移除属性aaa后

对 input 输入框的操作

// 2.1 获取输入框对象
var obj = document.getElementById('shuru');
// 2.2 输出调试value属性
console.log(obj.value);
obj.value = '赵子龙';

对文本值进行操作
ps：Text 会解析标签，HTML不会解析标签

var box = document.getElementById('box');
console.log(box.innerText);
console.log(box.innerHTML);
box.innerText = 'askdjieiojaslfjs';
box.innerHTML = '<h1>秋风萧瑟，洪波涌起</h1>>'