js 获取元素的方法

1、通过ID

通过ID获取元素: document.getElementById('ID');返回这个元素的引用，返回的是一个元素

document文档 get 获取 Element 元素 ById 通过 ID

// 1、找到谁
// 2、事件
// 3、做什么
// 元素.事件 = function () { 要做的事 }

// 1、找到谁（通过ID获取元素）。  document文档   get获取   Element元素   ById通过ID
var box = document.getElementById('box');
console.log(box);

// 2、添加点击事件，执行一个函数
box.onclick = function () {
    alert('哥们，中午不睡，下午崩溃');
}

2、通过标签名

// 2、通过标签名获取元素
// 特点：获取的是多个，集合、对象(类数组、伪数组)，它有长度，有下标，可以通过下标获取某一个元素
// document.getElementsByTagName('标签名'); 获取整个文档下面的某个标签
// 父级.getElementsByTagName('标签名'); 获取当前这个父级下面的某个标签

var li = document.getElementsByTagName('li');
console.log(li);
console.log(li.length);
console.log(li[1]);

var list2 = document.getElementById('list2');
var li = list2.getElementsByTagName('li');
console.log(li);
console.log(li.length);
console.log(li[1]);

3、通过class名

IE8及以下不支持

// 3、通过class名获取元素(IE8及以下不支持)
// 特点：获取的是多个，集合、对象(类数组、伪数组)，它有长度，有下标，可以通过下标获取某一个元素
// document.getElementsByClassName('class名');
// 父级.getElementsByClassName('class名');

// var abc = document.getElementsByClassName('abc');
var abc = list1.getElementsByClassName('abc');
console.log(abc);
console.log(abc.length);
console.log(abc[0]);

2、交互三要素

1、找到谁

2、做什么操作

3、干什么事

元素.事件 = function () { 要做的事 }

3、window.onload

当页面加载完成之后（页面包含的htmlcssjs图片等等），执行这个函数

window.onload = 函数
<span>// 什么时候加window.onload，只有在代码写在head中，并且要操作body中的内容才加</span>
// 当页面加载完成之后，执行这个函数
// 页面加载完成，包括页面中的html css js 图片等等一切资源加载完成
// window.onload = function(){}

window.onload = function () {
    var box = document.getElementById('box');
    console.log(box);

    box.onclick = function () {
        alert('哥们，中午不睡，下午崩溃');
    }
}

4、鼠标事件

onclick ：点击事件

ondblclick：双击事件

onmouseover ： 鼠标移入元素

onmouseout : 鼠标离开元素

onmouseenter ：鼠标移入元素

onmouseleave ：鼠标离开元素

onmousemove: 鼠标在元素中移动

onmousedown： 鼠标按下

onmouseup： 鼠标抬起

oncontextmenu ：鼠标右键菜单事件

var box = document.getElementById('box');

// console.log(box);

// 1、点击
box.onclick = function () {
    console.log('哥们，点我了');
}

// 2、双击
box.ondblclick = function () {
    console.log('哥们，双击我了');
}

// 3、滑上
box.onmouseover = function () {
    console.log('滑上');
}

// 4、滑离
box.onmouseout = function () {
    console.log('滑离');
}

// 5、进入
box.onmouseenter = function () {
    console.log('进入');
}

// 6、离开
box.onmouseleave = function () {
    console.log('离开');
}

// 7、鼠标在元素上滑动（在滑动的过程中，会不断的触发）
box.onmousemove = function () {
    console.log('滑动');
}

// 8、按下
box.onmousedown = function () {
    console.log('按下');
}

// 9、抬起
box.onmouseup = function () {
    console.log('抬起');
}

// 10、鼠标右键
box.oncontextmenu = function () {
    console.log('右键菜单');
}

5、javaScript操作标签

1、元素内容操作

1、表单元素

获取：元素.value;

设置：元素.value = 值;

注意：设置会覆盖原来的内容

<input type="text">
<br>
<br>
<button>获取</button>
<button>设置</button>

// 获取：元素.value
// 设置：元素.value = 值

var input = document.getElementsByTagName('input')[0];
var btn = document.getElementsByTagName('button');

// console.log(input);
// console.log(btn);

// 获取
btn[0].onclick = function () {
    console.log(input.value);
}

// 设置
btn[1].onclick = function () {
    input.value = '小王，醒醒吧';
}

2、双标签元素

识别标签

获取：元素.innerHTML

设置：元素.innerHTML = 值

不识别标签

获取：元素.innerText

设置：元素.innerText = 值

<div>我就是我，<b>不一样</b>的烟火</div>

<button>获取</button>
<button>设置</button>

// innerHTML: 识别标签
// 获取：元素.innerHTML
// 设置：元素.innerHTML = 值

// innerText: 不识别标签
// 获取：元素.innerText
// 设置：元素.innerText = 值

var div = document.getElementsByTagName('div')[0];
var btn = document.getElementsByTagName('button');
// console.log(div, btn); // 检查获取得对不对

// 获取
btn[0].onclick = function () {
    console.log(div.innerHTML);
    console.log(div.innerText);
}

// 设置
btn[1].onclick = function () {
    // div.innerHTML = '<i>张三</i>来了';
    div.innerText = '<i>张三</i>来了';
}

1、操作元素属性

属性：写在起始标签里的名值对

获取：元素.属性名

设置：元素.属性名 = 值

class要改成className

获取：元素.className

设置：元素.className = 值

<div id="box" title="来自大自然" class="abc bg">平头哥</div>

// 属性操作：写在起始标签里的名值对就是属性
// 获取：元素.属性名
// 设置：元素.属性名 = 值

var box = document.getElementById('box');

// 普通的属性操作
console.log(box.title); // 获取
box.title = '不服就干'; // 设置

// ----------------------------------------
// class操作
// 注意：class是一个特殊的属性，要用className代替
// 获取
// console.log(box.className);

// 设置
// box.className = 'def'; // 覆盖原来的
// box.className = box.className + ' def'; // 获取原来的，和新的拼接，然后再赋回去
box.className += ' def'; // 简写为+=

2、操作元素样式

设置：元素.style.样式名 = 值; 设置的是行间的样式

获取：元素.style.样式名; 获取的行间的样式（只能获取行间的样式，因为只能获取行间的，所以几乎没用）

设置：元素.style.cssText = 'width: 200px; height: 200px;'

<div id="box" style="border: 10px solid brown;">平头哥</div>

// 需求：点击平头哥，给它设置宽高各200，背景红色，字号30px

// 最好的实现方式是：操作元素的class，而不是操作元素的样式

// 设置：元素.style.样式名 = 样式值
// 获取：元素.style.样式名    （只能获取行间的样式，因为只能获取行间的，所以几乎没用）

var box = document.getElementById('box');

box.onclick = function () {
    box.style.width = '200px';
    box.style.height = '200px';
    box.style.backgroundColor = 'red';
    box.style.fontSize = '30px';
    box.style.color = 'white';

    // --------------------------------

    // 虽然可以简写一点，但是会覆盖原来行间的样式，所以一般也不用
    // box.style.cssText = 'width:200px; height: 200px;background-color: green; font-size: 40px; color: white;';
}