有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js 获取元素的方法

javascript cat 11个月前 (11-16) 39次浏览 已收录 0个评论 扫描二维码

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;';
}
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址