DOM相关知识点整理1

document.body;		//获取的是元素--标签
document.title;	//标签中的值
document.documentElement;//获取根元素html

document.getElementById("btn").onclick = function () {
    alert("哈哈,我又变帅了");
};

var btnObj=document.getElementById("btn");
btnObj.onclick = function(){
    alert("这是分成两行代码的方式");
}

var btnObj=document.getElementById("btn");
//为按钮注册点击事件,添加事件处理函数
btnObj.onclick=function () {
	var imObj=document.getElementById("im");
	imObj.src="images/liuyan.jpg";
	imObj.width="300";
	imObj.height="400";
};

//根据id获取按钮,为按钮注册点击事件,添加事件处理函数
document.getElementById("btn").onclick=function () {
	//根据id获取p标签,设置内容
	document.getElementById("p1").innerText="这是一个p";
};

//注册点击事件,添加事件处理函数
document.getElementById("btn").onclick = function () {
	//设置href属性
	document.getElementById("ak").href = "https://codingwithalice.github.io/";
	//设置文字内容
	document.getElementById("ak").innerText = "CodingWithAlice";
};

//上面的代码，获取了两次id为ak的元素，增加了浏览器的负担。
//优化后的:
document.getElementById("btn").onclick = function () {
	//设置href属性，设置文字内容
	var aObj = document.getElementById("ak");
	aObj.href = "https://codingwithalice.github.io/";
	aObj.innerText = "CodingWithAlice";
};

document.getElementById("btn").onclick=function () {
	//根据标签名字获取标签,返回的是一个伪数组
	var pObjs= document.getElementsByTagName("p");
		//循环遍历这个数组
		for(var i=0;i<pObjs.length;i++){
            //每个p标签,设置文字
            pObjs[i].innerText="我们都是p";
		}
};

document.getElementById("btn").onclick = function () {
	//没有给img id名称，可以用tagname获取，但是一定要注意返回的是一个伪数组
	var imgObjs = document.getElementsByTagName("img");
	imgObjs[0].alt = "改了";//调用的时候以数组的形式调用
	imgObjs[0].title = "实现吧";
};

document.getElementById("btn").onclick = function () {
	//获取所有的文本框，包含了第一个type为button
	var inputs = document.getElementsByTagName("input");
	for (var i = 0; i < inputs.length; i++) {
		//用该元素的type属性判断这个元素是不是按钮
		if (inputs[i].type != "button") {
			inputs[i].value = "CodingWithAlice";
		}
	}
};

	document.getElementById("btn").onclick=function () {
		document.getElementById("dv").style.display="none";
	};
	document.getElementById("btn2").onclick=function () {
		document.getElementById("dv").style.display="block";
	};

//点击按钮,通过类样式的方式设置div的显示和隐藏
document.getElementById("btn").onclick = function () {
	//判断的是div是否应用了类样式
	if (document.getElementById("dv").className != "cls") {
		//没有应用类样式，现在是显示的,应该隐藏
		document.getElementById("dv").className = "cls";
		//执行完上一句，就隐藏了，按钮改变
		this.value = "显示";
	} else {
		document.getElementById("dv").className = "";
        //执行完上一句，就显示了，按钮改变
		this.value = "隐藏";
	}
};

document.getElementById("btn").onclick = function () {
	document.body.className = document.body.className != "cls" ? "cls" : "";
};

document.getElementById("btn1").onclick = function () {
	document.getElementById("rad1").checked = true;
};

document.getElementById("btn2").onclick=function () {
	document.getElementById("ck1").checked=true;
	document.getElementById("ck2").checked=true;
};

document.getElementById("btn").onclick=function () {
	//点击按钮选择菜
	document.getElementById("op1").selected=true;
};

document.getElementById("btn2").onclick=function () {
    //推荐使用value，textarea是表单标签。
	document.getElementById("tt").value="CodingWithAlice";
	//document.getElementById("tt").innerText="哈哈";
};

//点击小图,下面显示大图 //点击超链接触发事件
document.getElementById("ak").onclick=function () {
	document.getElementById("big").src=this.href;
	return false;//保证小图的保留
};

//第一步：点击a标签,把a标签中的href的属性值给id为image的src属性
//第二步：把a的title属性的值给id为des的p标签赋值
var aObjs=document.getElementById("imagegallery").getElementsByTagName("a");
//循环遍历所有的a标签
for(var i=0;i<aObjs.length;i++){
	//为每个a标签注册点击事件
	aObjs[i].onclick=function () {
		document.getElementById("image").src=this.href;
		document.getElementById("des").innerText=this.title;
		//阻止超链接默认的跳转
		return false;
	};
}

//第一种方法
document.getElementById("btn").onclick=function () {
	//获取所有的li标签
	var list=document.getElementById("uu").getElementsByTagName("li");
	for(var i=0;i<list.length;i++){
		if(i%2==0){
			list[i].style.backgroundColor="red";
		}else{
			list[i].style.backgroundColor="yellow";
		}
	}
};

//第二种方法：简写，善于利用三元表达式
document.getElementById("btn").onclick = function () {
	//获取所有的li标签
	var list = document.getElementById("uu").getElementsByTagName("li");
	for (var i = 0; i < list.length; i++) {
		list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
	}
};

var btnObjs = document.getElementsByTagName("input");
for (var i = 0; i < btnObjs.length; i++) {
	//每个事件包括两件事情
	btnObjs[i].onclick = function () {
		//第一：把所有的按钮的value值设置为默认的值:没怀孕
		for (var j = 0; j < btnObjs.length; j++) {
			btnObjs[j].value = "没怀孕";
		}
		//第二：当前被点击的按钮设置为:怀孕了
		this.value = "怀孕了";
	};
}

//方法1：
document.getElementById('im').onclick=function(){
	this.src=document.getElementById('a1').href;
	return false;//阻止链接默认跳转
}

function f1() {
	alert("哇塞,好漂亮哦");
	return false;
}

        //获取所有的li标签
        var list = document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            //为li注册鼠标进入事件
            list[i].onmouseover = function () {
                this.style.backgroundColor = "yellow";
            };
            //为li注册鼠标离开事件
            list[i].onmouseout = function () {
                //恢复到这个标签默认的颜色
                this.style.backgroundColor = "";
            };
        }

	//方法一：直接修改样式 .style.属性 = 值；
	document.getElementById$("btn").onclick = function () {
		document.getElementById("dv").style.width = "300px";
		document.getElementById("dv").style.height = "200px";
		document.getElementById("dv").style.backgroundColor = "pink";
        //原来在css中是background-color
	};

	my$("btn").onclick = function () {
		//在js代码中DOM操作的时候,设置元素的类样式,不用class关键字,应该使用,className
		my$("dv").className="cls";
        //等价于：<div id="dv" class=“cls”/cls></div>
	};

		my$("txt").onfocus = function () {
			//判断文本框的内容是不是默认的内容
			if (this.value == "请输入搜索内容") {
				this.value = "";//清空文本框
				this.style.color = "black";
			}
		};
		my$("txt").onblur = function () {
		//1.判断字符串方式
			if (this.value == "") {
				this.value = "请输入搜索内容";
				this.style.color = "gray";
			}
		//2.判断字符串长度方式，更推荐这种，数字判断的运行效率高
			if (this.value.length == 0) {
				this.value = "请输入搜索内容";
				this.style.color = "gray";
			}
		};

var list=my$("uu").getElementsByTagName("li");//根据id获取ul标签,并且或者该标签中所有的li
//为每个li添加自定义属性
for(var i=0;i<list.length;i++){//循环遍历
	list[i].setAttribute("score",(i+1)*10);//添加在DOM对象上,不在标签中
	list[i].onclick=function(){//点击每个li标签,获取对应的自定义属性值
		alert(this.getAttribute("score"));
	};
}
//移除自定义属性
document.getElementById("btn").onclick=function () {
	document.getElementById("dv").removeAttribute("score");//移除自定义属性，没值也没属性
	document.getElementById("dv").className="";//移除元素的类样式，值没有了,但是属性还是有的	
	document.getElementById("dv").removeAttribute("class");//移除自定义属性，没值也没属性
};