一、DOM对象查找 HTML 元素
有三种方法来做这件事：
1.getElementById(id属性值);通过 id 查找 HTML 元素
2. getElementsByTagName(标签名)通过标签名查找 HTML 元素
3. getElementsByClassName(class属性值)通过类名找到 HTML 元素
例如：
<!DOCTYPE html>
<html>
<head>
<title>查找 HTML 元素方法</title>
<meta charset="utf-8">
<script>
//DOM对象
//DOM--Document Object Model---文档对象模型
//当网页被加载时，浏览器会创建页面的文档对象模型。
//1.从dom[文档对象模型]得到需要被控制的html元素对应的dom对象
//1.1.document.getElementById(id属性值);通过 id 查找 HTML 元素
//注意:html元素必须提供id属性
// 当id属性相同时，只控制第一个
/*function testgetId(){
var pdom= document.getElementById("p1");
alert(pdom);//[object HTMLParagraphElement]得到元素的dom对象
pdom.style.color="red";
}*/
//2.getElementsByTagName(标签名)通过标签名查找 HTML 元素
//注意:标签名相同的元素有多个时，会得到一个dom对象数组
// 当元素在html文件中只有一个的时候，
// 通过getElementsByTagName方法得到的结果依然是数组
/*function testTagName(){
var hdom= document.getElementsByTagName("h4");
//alert(hdom);//[object HTMLCollection]得到一个HTML的数组对象不是元素对象的dom对象
hdom[0].style.color="red";
//alert(hdom[0].innerText)
}*/
//3. getElementsByClassName(class属性值)通过类名找到 HTML 元素
//注意:class的属性值相同的元素有多个时，会得到一个dom对象数组
// 当元素在html文件中只有一个的时候，
// 通过getElementsByClassName方法得到的结果依然是数组
function testClassName(){
var cdom= document.getElementsByClassName("c1");
//alert(cdom);//[object HTMLCollection]
cdom[0].style.color="red";
}
</script>
</head>
<body>
<p id="p1">getElementById(id属性值);通过 id 查找 HTML 元素</p>
<p id="p1">getElementById(id属性值);通过 id 查找 HTML 元素</p>
<input type="button" value="测试通过getElementById(id属性值) 查找 HTML 元素" onclick="testgetId()"/>
<h4>getElementsByTagName(标签名)通过标签名查找 HTML 元素</h4>
<h4>getElementsByTagName(标签名)通过标签名查找 HTML 元素</h4>
<input type="button" value="测试通过getElementsByTagName(标签名)查找HTML元素" onclick="testTagName()">
<h5 class="c1">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</h5>
<h5 class="c1">getElementsByClassName(class属性值)通过标签名查找 HTML 元素</h5>
<input type="button" value="测试通过getElementsByClassName(class属性值)查找HTML元素" onclick="testClassName()">
</body>
</html>二、.JavaScript 能够改变页面中的所有 HTML 元素
有两种：
1.innerHTML 属性–改变页面中HTML 元素的文本内容
2.innerText 属性–改变页面中HTML 元素的文本内容
3.value属性—得到或者修改表单元素的内容
例如：
<!DOCTYPE html>
<html>
<head>
<title>到或者改变页面中的所有HTML元素以及元素的文本内容]</title>
<meta charset="utf-8">
<script>
//得到或者改变页面中的所有HTML元素以及元素的文本内容]
//1.innerHTML --- 会得到或者修改html元素以及元素内容
//得到html元素的内容 得到的元素内容时有id元素之间的文本内容和标记元素
function innerHTMLGetContent(){
var pdom= document.getElementById("p1");
var pod = pdom.innerHTML;
alert(pod)
}
//改变元素的内容或者修改元素
function innerHTMLUpdateContent(){
var pdom= document.getElementById("p1");
//pdom.innerHTML="<h4>测试innerHTML属性</h4>";//测试innerHTML属性
pdom.innerHTML="修改后的元素内容";
}
//2.innerText --- 会得到或者修改html元素的文本内容
//得到html元素的内容 得到是元素中的内容不包括元素中有的标记
function innerTextGetContent(){
var pdom= document.getElementById("p2");
alert(pdom.innerText)
}
//改变元素的内容或者修改元素
function innerTextUpdateContent(){
var pdom= document.getElementById("p2");
//pdom.innerText="<h4>测试innerText属性</h4>";//<h4>测试innerText属性</h4>
pdom.innerText="修改后的元素为内容";
}
//3.value属性---得到或者修改表单元素的内容
//得到表单元素的值
function valueGetContent(){
var inp1dom= document.getElementById("inp1");
var getinp=inp1dom.value;
alert(getinp)
}
///修改表单元素的值
function valueUpdateContent(){
var inp1dom= document.getElementById("inp1");
inp1dom.value="";
}
</script>
</head>
<body>
<p id="p1">测试<a href="#">innerHTML</a>属性</p>
<input type="button" value="测试innerHTML属性得到元素内容" onclick="innerHTMLGetContent()">
<input type="button" value="测试innerHTML属性改变元素内容" onclick="innerHTMLUpdateContent()">
<p id="p2">测试<a href="#">innerText</a>属性</p>
<input type="button" value="测试innerText属性得到元素内容" onclick="innerTextGetContent()">
<input type="button" value="测试innerText属性改变元素内容" onclick="innerTextUpdateContent()"><br><br>
<input id="inp1" type="text" value="默认值">
<input type="button" value="测试value得到内容" onclick="valueGetContent()">
<input type="button" value="测试value修改内容" onclick="valueUpdateContent()">
</body>
</html>三、JavaScript 能够改变页面中的所有 HTML 属性
1.得到html元素的属性值:dom对象.属性名称;
2.修改html元素的属性值:dom对象.属性名称=属性值;
例如：
<!DOCTYPE html>
<html>
<head>
<title>控制html元素的属性</title>
<meta charset="utf-8">
<script>
//控制html元素的属性
//1.得到html元素的属性值:dom对象.属性名称;
function getimg(){
var imgdom= document.getElementById("img1");
alert(imgdom.src)
}
//2.修改html元素的属性值:dom对象.属性名称=属性值;
function updatetImg(){
var imgdom= document.getElementById("img1");
if(imgdom.src=="file:///E:/wangxingPeiXun/JavaScript%E9%AB%98%E7%BA%A7/20211009JavaScript%E9%AB%98%E7%BA%A7%EF%BC%883%EF%BC%89/lianxi/imgs/avatar2.png"){
imgdom.src="imgs/avatar3.png";
}else{
imgdom.src="imgs/avatar2.png";
}
}
</script>
</head>
<body>
<img id="img1" src="imgs/avatar2.png">
<input type="button" value="测试得到元素的属性值" onclick="getimg()">
<input type="button" value="测试修改元素的属性值" onclick="updatetImg()">
</body>
</html>四、JavaScript 能够改变页面中的所有 CSS 样式
1.得到html元素的css属性值:dom对象.style.属性名称;
2.修改html元素的css属性值:dom对象.style.属性名称=属性值;
例如：
<!DOCTYPE html>
<html>
<head>
<title>控制html元素的属性</title>
<meta charset="utf-8">
<script>
//控制html元素的css
//得到html元素的css属性值:dom对象.style.属性名称;
//只适用于行内设置css
function getCss(){
var pdom = document.getElementById("p1");
alert(pdom.style.fontSize);//30px
}
//修改html元素的css属性值:dom对象.style.属性名称=属性值;
function updateCss(){
var pdom = document.getElementById("p1");
pdom.style.color="yellow";
}
</script>
</head>
<body>
<p id="p1" style="font-size: 30px;color: red;">测试html元素的内容</p>
<input type="button" value="测试得到元素的css样式值" onclick="getCss()">
<input type="button" value="测试改变元素的css样式值" onclick="updateCss()">
</body>
</html>五、JavaScript 能够控制事件
1.页面初始化事件–onload—当html页面被打开的时候触发
2.点击事件–onclick—当html页面中的元素被点击时候触发
3.聚焦事件–onfocus—当html页面中的元素获得焦点的时候触发
4.失焦事件–onblur—当html页面中的元素失去焦点的时候触发
5.鼠标进入事件–onmouseover–当鼠标移动到html元素上的时候触发
6.鼠标划出事件–onmouseout–当鼠标移动到html元素外的时候触发
7.表单提交事件–onsubmit–当提交表单时触发
8.键盘按下事件–onkeydown(event)–当按下键盘按键是触发
例如：
<!DOCTYPE html>
<html>
<head>
<title>控制事件</title>
<meta charset="utf-8">
<script>
//1.页面初始化事件--onload
//1.1在body元素中添加onload="事件执行函数"
//<body onload="testload()">
/*function testload(){
alert("测试页面初始化事件")
}*/
//1.2使用Window.onload=function(){}
/*window.onload=function(){
alert("测试页面初始化事件")
}*/
//2.点击事件--onclick
function testClick(){
alert("测试点击事件");
}
//3.聚焦事件--onfocus 失焦事件--onblur
//聚焦
function testOnfocus(){
var intdom= document.getElementById("inp1");
intdom.value=""
}
//失焦
function testOnblur(){
var intdom= document.getElementById("inp1");
intdom.value="测试失焦事件"
}
//4.鼠标进入事件--onmouseover 鼠标移出事件--onmouseout
//鼠标进入
function testmove(){
var imgdom=document.getElementById("img1");
imgdom.style.width="300px";
}
//鼠标移出
function testOut(){
var imgdom=document.getElementById("img1");
imgdom.style.width="";//恢复之前照片大小
}
//5.表单提交事件--onsubmit--当提交表单的时候触发
function testsubmit(){
alert("表单提交事件");
return true;
}
//6.键盘按下事件--onkeydown--当按下键盘按键的时候触发
function testkey(event){
var code=event.keyCode;
if(code==13){
alert("回车键");
}
if(code==37){
alert("<--");
}
if(code==38){
alert("上");
}
if(code==39){
alert("-->");
}
if(code==40){
alert("下");
}
}
</script>
</head>
<body onkeydown="testkey(event)">
<h4>控制事件</h4>
<h5>页面初始化事件--onload---当html页面被打开的时候触发</h5>
<h5>点击事件--onclick---当html页面中的元素被点击时候触发</h5>
<input type="button" value="测试点击事件" onclick="testClick()">
<h5>聚焦事件--onfocus---当html页面中的元素获得焦点的时候触发</h5>
<h5>失焦事件--onblur---当html页面中的元素失去焦点的时候触发</h5>
<input id="inp1" type="text" value="默认值" onfocus="testOnfocus()" onblur="testOnblur()">
<h5>鼠标进入事件--onmouseover--当鼠标移动到html元素上的时候触发</h5>
<h5>鼠标移出事件--onmouseout--当鼠标从html元素上的移动出去以后时候触发</h5>
<img id="img1" src="imgs/avatar2.png" onmousemove="testmove()" onmouseout="testOut()">
<h5>表单提交事件--onsubmit--当提交表单的时候触发</h5>
<form action="login" method="get" onsubmit="return testsubmit()">
<input type="text" name="username" value="用户名" /><br>
<input type="password" name="password" value="" /><br>
<input type="submit" value="提交"/>
</form>
<h5>键盘按下事件--onkeydown--当按下键盘按键的时候触发</h5>
</body>
</html>六、创建和删除HTML 元素
创建元素
document.createElement(“元素名称”);
document.createTextNode(“文本内容”);
父元素的dom对象.appendChild(node);
删除元素 父元素的dom对象.removeChild(子元素的dom对象);
例如;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
#div1{
width: 200px;
height: 200px;
border: 8px solid red;
}
</style>
<script>
window.onload=function(){
var but1= document.getElementById("but1");
var h4dom=null;
but1.onclick=function(){
//创建标记
h4dom=document.createElement("h4");
//创建元素内容
var h4text=document.createTextNode("测试创建HTML内容");
//将元素内容追加给标记
h4dom.appendChild(h4text);
h4dom.style.color="blue";
//将h4标记追加到div中
var divdom=document.getElementById("div1");
divdom.appendChild(h4dom)
}
var but2= document.getElementById("but2");
but2.onclick=function(){
//将h4标记追加到div中
var divdom=document.getElementById("div1");
divdom.removeChild(h4dom);
}
}
</script>
</head>
<body>
<input id="but1" type="button" value="创建html元素"/><br>
<input id="but2" type="button" value="删除html元素"/>
<div id="div1"></div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79860.html
