本文详细讲解了如何通过DOM操作获取和修改元素，包括onload事件的应用、非表单操作（如图片切换和样式设置）、表单操作（如值判断与按钮状态），以及onmouseover与onmouseenter的区别。深入理解jQuery底层逻辑和CSS操作。
这里写目录标题
获取DOM对象
注意 : 根据id获取和querySelector获取的都是DOM对象 , 其他都是伪数组
<script>
// 根据id获取 返回单个DOM对象
var box1 = document.getElementById("box1");
console.log(box1);
// 对box1绑定点击事件,当点击之后触发
box1.onclick = function () {
// alert("box1被点击了");
// 点击之后更改文本内容
this.innerText = 'box1被点击了';
}
// 根据class获取,返回伪数组
// (DOM对被保存在伪数组,想要操作需要在数组中取出进行操作)
var box2 = document.getElementsByClassName("box2");
console.log(box2);
for (let index = 0; index < box2.length; index++) {
box2[index].onclick = function () {
alert("box2被点击了");
// 点击之后更改文本内容
// this.innerText = 'box2被点击了';
}
}
// 根据标签名获取,返回伪数组
var divs = document.getElementsByTagName("div");
// [div#box1, div.box2, div.box2, box1: div#box1]
console.log(divs);
// 根据name属性获取,返回为数组
var as = document.getElementsByName('a');
// [div.box2]
console.log(as);
// querySelector 获取指定选择器中的第一个元素,参数是选择器,返回单个DOM对象
var box1 = document.querySelector("#box1");
var box2 = document.querySelector(".box2");
console.log(box1);
console.log(box2);
// querySelectorAll 获取指定选择器中的所有元素,参数是选择器,返回伪数组
var box1 = document.querySelectorAll("#box1");
// [div#box1]
console.log(box1);
var box2 = document.querySelectorAll(".box2")
// [div.box2, div.box2]
console.log(box2);
</script>
事件
<script>
/**
* js中对于HTML绑定事件,有两种方式,
* 第一种是在标签中直接绑定(在标签里写js代码)
* 第二种是在js中获取标签的DOM对象,然后再绑定,这种方式又叫做迟邦定
*/
/**
* 事件三要素
* 事件源 事件类型 事件处理程序
*/
</script>
onload
<script>
/**
* 获取DOM对象的语句必须在body之后,否则会获取不到对于的DOM对象,而onload就是专门解决这类事件的
*/
window.onload = init;
function init() {
// 本来应该是获取不到DOM对象的
var btn = document.getElementById("btn");
btn.onclick = function () {
alert('被点击了');
}
}
</script>
</head>
<body>
<button id="btn">点击</button>
</body>
非表单操作
<script>
// 标签就支持的属性可以通过 DOM对象.属性 来设置
// 标签不支持的 需要 DOM对象.style.属性(例) 这样的方式来设置
// 比如宽高属性,div是没有宽和高的 就需要通过 DOM对象.style.weight去设置
// 而img标签本身就具有宽高属性,就可以 DOM对象.weight来设置 window.onload = init;
function init() {
// 对象初始化
// getId是common.js里的一个方法 作用是通过id获取DOM对象
var changeImg = getId('changeImg');
var changeSize = getId('changeSize');
var hide = getId('hide');
var show = getId('show');
var img = getId('img');
var changeClass = getId('changeClass');
// 事件绑定
changeImg.onclick = function () {
img.src = './images/2.jpg';
}
changeSize.onclick = function () {
// 通过标签属性直接更改
img.width = 150;
// 通过style更改(css)
img.style.height = '200px';
}
hide.onclick = function () {
// 1 src
// img.src='';
// 2 display=none 不占有位置
img.style.display = 'none';
// 3 visibility ='hidden' 占有位置
// img.style.visibility = 'hidden';
}
show.onclick = function () {
// img.style.visibility = 'block';
}
changeClass.onclick = function () {
// 会覆盖原来的class
img.className = 'img2'
// 可以利用 += 做到新增class属性,注意 空格隔开
img.className += ' img2'
}
}
</script>
</head>
<body>
<div>
<button id="changeImg">切换图片</button>
<button id="changeSize">更改大小</button>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="changeClass">切换class</button>
</div>
<br>
<img src="./images/1.jpg" class="img1" id="img" alt="">
<div>222</div>
</body>
表单操作
获取值
var usernameValue = username.value;
if (usernameValue == null || usernameValue == undefined || usernameValue.trim() == "") {
alert("用户名不能为空");
return;
}
// 获取密码
var passwordValue = password.value;
if (passwordValue == null || passwordValue == undefined || passwordValue.trim() == "") {
alert("密码不能为空");
return;
} else if (passwordValue.trim().length < 6) {
alert("密码长度不能小于6位");
// password.value='';
return;
}
判断是否选中按钮
// 判断是否选中性别
// console.log(man.checked);
if (man.checked || woman.checked) {
// 设置禁用按钮
login.disabled = true;
login.value = '正在登陆...'
login.style.backgroundColor = 'gray';
// 提交表单
form.submit();
// 浏览器跳转
// window.location.href='http://www.baidu.com';
} else {
alert('请输入性别');
return;
}
样式设置
<script>
window.onload=function(){
var btn = $('#btn')[0];
var content = $("#content")[0];
btn.onclick=function(){
// 设置颜色
var red = Math.floor(Math.random()*256);
var green = Math.floor(Math.random()*256);
var blue = Math.floor(Math.random()*256);
var color= "rgb("+red+","+green+","+blue+")";
content.style.backgroundColor = color;
// 设置宽高
var width = Math.floor(Math.random()*256 + 100);
var height = Math.floor(Math.random()*256 + 100);
content.style.width=width+"px";
content.style.height=height+"px";
}
}
</script>
innerText和innerHTML
<script>
window.onload = function () {
var txt = $("#txt")[0];
// 获取标签中 的文本,不含子标签,但是含子标签中的内容
// 我是段落 学习学习
console.log(txt.innerText);
// 设置P标签中 的文本内容,如果内容中含有标签,则不会被解析
// txt.innerText = '<span>xxx</span>';
// 获取标签中 的文本,含子标签
// 我是段落 <span>学习学习</span>
console.log(txt.innerHTML);
// 设置p标签中的内容,如果内容中含有子标签,会被解析
txt.innerHTML='2222<span>哈哈</span>'
}
</script>
onmouseover 与onmouseenter的区别
onmouseenter 事件在鼠标指针移动到元素上时触发。
该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡
onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseenter 事件中有在鼠标指针进入 div 元素时触发。
onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发 并且离开子元素进入父元素的时候 父元素会被重新触发
注 : 代码中的$、getId等函数是用来理解之后要学的jQuery的底层逻辑
/**
* 传入选择器,获取对应的DOM对象,返回伪数组
* 主要解决创建对象的时候,不需要调用很多方法,一个方法搞定
* @param {*} selector
*/
function $(selector) {
var obj = document.querySelectorAll(selector);
// --------1
// obj.css = function(attr,value){
// // this就是这个obj 伪数组对象
// for(var i = 0 ; i < this.length; i++){
// this[i].style[attr]=value;
// }
// // reutrn this 可以链式调用
// return this;
// }
// -------------2
// obj.css = function (x) {
// for (key in x) {
// // this就是这个obj 伪数组对象
// for (var i = 0; i < this.length; i++) {
// this[i].style[key] = x[key];
// // style.color style['color']
// }
// }
// // reutrn this 可以链式调用
// return this;
/**
* 向obj中添加css函数,可以通过obj对象.css()进行调用
*
* 向伪数组中所有的DOM对象,设置相同的样式
*
* 只能设置单个样式
* 并且 属性 要把-变为首字母大写 : font-size 写成 fontSize
*
* 设置单个属性,可以链式调用
* $('xxx').css('属性','值').css('属性','值').....;
*
* 同时设置多个属性 , 可以链式调用
* $("xxx").css({
* 属性:值,
* 属性:值,
* ....
* }).css(xxxxx);
*
*
* $("xxx").css('属性') 返回对应的属性的值,不能链式调用
*
* 1 一个参数 , 如果是对象,则对所有DOM对象设置多个样式,支持链式调用
* 2 一个参数 , 不是对象,就认为是属性,则返回第一个DOM对象的属性的值,不支持链式调用
* 3 两个参数 , 第一个attr是属性,第二个value是属性对应的值,则对所有DOM设置该样式和值
*
* @param {属性名} attr
* @param {属性值} value
*/
obj.css = function (attr, value) {
// 传递了1个参数,说明有可能传递的是对象,想要设置多个
if (arguments.length == 1) {
// 判断attr是否是对象
if (typeof attr == 'object') {
// 遍历对象,获取key和value(属性和值)
for (key in attr) {
// this就是这个obj 伪数组对象
// 循环遍历 对 DOM对象进行样式设置
for (var i = 0; i < this.length; i++) {
this[i].style[key] = attr[key];
// style.color style['color']
}
}
} else {
// 1个值,不是对象,说明是获取,就返回第一个DOM对象的属性值
return this[0].style[attr];
}
} else {
// 到这里 说明是 设置单个属性
for (var i = 0; i < this.length; i++) {
this[i].style[attr] = value;
}
}
// reutrn this 可以链式调用
return this;
}
/**
* 封装innerText属性,该方法,无参是获取,有参是设置
*
* 如果obj中有多个DOM对象,则全部设置,如果是获取操作,则只获取第一个元素的innerText
*
* @param {需要设置的内容} text
*/
obj.text = function (text) {
// 判断 是否传递参数
if (arguments.length >= 1) {
for (var i = 0; i < this.length; i++) {
this[i].innerText = text;
}
return this;
} else {
// 无参是获取
return this[0].innerText;
}
}
/**
* 封装innerHTML属性,该方法,无参是获取,有参是设置
*
* 如果obj中有多个DOM对象,则全部设置,如果是获取操作,则只获取第一个元素的innerHTML
*
* @param {需要设置的内容} html
*/
obj.html = function (html) {
// 判断 是否传递参数
if (arguments.length >= 1) {
for (var i = 0; i < this.length; i++) {
this[i].innerHTML = html;
}
return this;
} else {
// 无参是获取
return this[0].innerHTML;
}
}
return obj;
}
/**
* 随机生成范围的值
* @param {*} min
* @param {*} max
*/
function getRandom(min, max) {
// 随机数 * (最大 - 最小 +1) 结果 在+ 最小值
return Math.floor(Math.random() * (max - min + 1) + min);
}
/**
* 格式化时间
* @param {*} date
*/
function time(date) {
// 格式化,比 现在是3月 就把 3 更改为 03
function formatTime(time) {
// time = time >= 10 ? time : "0"+time;
if (time >= 10) {
return time;
} else {
return "0" + time;
}
}
var str = "";
var year = date.getFullYear();
var month = formatTime(date.getMonth() + 1);
var day = formatTime(date.getDate());
var hours = formatTime(date.getHours());
var minutes = formatTime(date.getMinutes());
var seconds = formatTime(date.getSeconds());
str += year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
return str;
}
扫一扫
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
