DOM操作

最新推荐文章于 2022-05-06 17:25:39 发布

tianxuanzhiren_hou

最新推荐文章于 2022-05-06 17:25:39 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/tianxuanzhiren_hou/article/details/83267985

DOM：文档对象模型
将HTML中的元素当做JS中的对象进行操作，称为DOM操作
Windows对象表示浏览器中打开的窗口，document对象整个文档
DOM操作核心：找对象、添加事件、修改属性……
在js中样式的名字采用小驼峰的命名对方，如：backgroundColor
console.log可以将数据输出到控制台，不会影响页面内容
查找元素
getElementById：根据ID查找，获取的是一个元素

var baidu = document.getElementById("baidu")
alert(baidu.innerHTML)       //获取元素内容 
alert(baidu.innerText)        //获取文本内容

getElementsByClassName：根据class属性查找元素，返回的是数组。

<div class ="shuangji" style="width:300px;height:300px;background:blue;">双击</div>
var shuangji = document.getElementsByClassName("shuangji")[0]

可以用获取数组元素的方式获取相应的值，如：
var shici = document.getElementsByClassName("shici")
alert(shici[1].innerText)

getElementsByTagName：根据标签名查找元素，反水的是数组

var aDiv = document.getElementsByTagName("div")

getElementsByName：根据那么属性查找元素，返回的是数组

var aSpan = document.getElementsByName("geming")

JS事件
onclick：单击事件

//找到对象
var danji = document.getElementById("danji")
//添加事件
danji.onclick = function(){
			//修改属性
			this.style.backgroundColor = "green"
		}

this表示当前对象

ondblclick:双击事件：

var shuangji = document.getElementsByClassName("shuangji")[0]
		shuangji.ondblclick = function (){
			this.style.backgroundColor="red"
		}

onfocus：获取焦点
onblur：失去焦点

	<body>
		用户名：<input name="username" value="请输入用户名："/>
	</body>
	
	<script>
		//获取元素
		var oInput = document.getElementsByName("username")[0]
		//获取焦点事件
		oInput.onfocus = function () {
			if (this.value == "请输入用户名：") {
				this.value = ""
			}
		}
		
		//失去焦点事件
		oInput.onblur = function () {
			if (this.value==""){
				this.value = "请输入用户名："
			}
		}
	</script>

onmouseover：鼠标移入
onmouseout：鼠标移出

<script>
	var show = document.getElementById("show")
	var meizi = document.getElementsByTagName("img")[0]
	
	//移入
	show.onmouseover = function(){
		meizi.style.display="inline"
	}
	
	show.onmouseout = function(){
		meizi.style.display="none"
	}
	
</script>

为按钮添加事件：


	<body>
		<button onclick="toRed()">编程红色</button>
		<button onclick="toGreen()">编程绿色</button>
	</body>
	
	<script>
	function toRed(){
		document.getElementById("skin").href="改变1.css"
	}
	function toGreen(){
		document.getElementById("skin").href="改变2.css"
	}
		
	</script>