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;';
}