一、获取节点
element1=window.document.getElementById("d1")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function fun1(){
//获取document对象
var element1=window.document.getElementById("d1")
console.log(element1)
//修改文本
element1.innerText="这是我的div"
}
function fun2(){
//获取document对象
var element2=window.document.getElementsByClassName("a")
console.log(element2)
for(var i=0;i<element2.length;i++){
console.log(element2[i])
}
}
function fun3(){
var element3=window.document.getElementsByTagName("input")
console.log(element3)
for(var i=0;i<element3.length;i++){
console.log(element3[i])
}
}
function fun4(){
var element4=window.document.getElementsByName("hobby")
console.log(element4)
for(var i=0;i<element4.length;i++){
console.log(element4[i])
}
}
</script>
</head>
<body>
<div id='d1' class="a">这是第一个div</div>
<div id='d2' class="a">这是第二个div</div>
<div id='d3' class="a">这是第三个div</div>
<input id='i1' class="a" name='name1'/>
<div id='d4' class="b" name='name1'>这是第四个div</div>
<div id='d5' class="b">这是第五个div</div>
爱好:
<input type="checkbox" name="hobby" value="1" />篮球
<input type="checkbox" name="hobby" value="2" />足球
<input type="checkbox" name="hobby" value="3" />羽毛球
<hr />
<input type="button" value="id值获取" onclick='fun1()' />
<input type="button" value="class属性值获取" onclick='fun2("b")' />
<input type="button" value="标签名获取" onclick='fun3()' />
<input type="button" value="name属性值获取" onclick='fun4()' />
</body>
</html>
二、操作节点属性
获得 节点.属性名 console.log(node.type)
修改 节点.属性名=属性值 node.type="button"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
//获取属性值
var node=window.document.getElementById("in1")
//语法:获得 节点.属性名 修改 节点.属性名=属性值
console.log(node.type)
console.log(node.value)
//修改属性值
node.type="button"
node.value="按钮"
}
</script>
</head>
<body>
<input type="text" value="你好呀" id="in1" />
<hr />
<input type="button" value="变" onclick="fun1()" />
</body>
</html>
三、操作标签文本
获得文本 .log(element1.innerText)
console.log(element1.innerHTML)
修改文本 element3.innerHTML="<h1>一刻也不能分割</h1>"
element3.innerText="<h1>一刻也不能分割</h1>"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid red;
width: 200px;
height: 200px;
}
</style>
<script>
function fun1(){
var element1=window.document.getElementById("d1")
/*
innerText
innerHtML
* */
//获得文本
console.log(element1.innerText)
console.log(element1.innerHTML)
var element2=window.document.getElementById("i1")
console.log(element2.value)
}
function fun2(){
//修改文本
var element3=window.document.getElementById("d1")
element3.innerHTML="<h1>一刻也不能分割</h1>"
//element3.innerText="<h1>一刻也不能分割</h1>"
var element4=window.document.getElementById("i1")
element4.value="祖国妈妈"
}
</script>
</head>
<body>
<div id='d1'>
a
<span>文字</span>
b
</div>
<input type="text" value="我和我的祖国" id='i1' />
<input type="button" value="获取内容" onclick="fun1()"/>
<input type="button" value="修改内容" onclick="fun2()"/>
</body>
</html>
四、操作节点样式
element.style.width="200px"
css样式在更多的时候以class选择器的形式作用在元素上,可以通过修改class属性,影响div样式
element.setAttribute("class","a")
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100px;
height: 100px;
border: 1px solid red;
}
.a{
background-color: lightblue;
color: blue;
font-size: 40px;
}
</style>
<script>
function fun1(){
//节点.style.样式名=样式值
var element=document.getElementById("div1")
element.style.width="200px"
element.style.height="200px"
element.style.border="10px solid green"
//css样式在更多的时候以class选择器的形式作用在元素上
//可以通过修改class属性,影响div样式
element.setAttribute("class","a")
}
</script>
</head>
<body>
<div id="div1" >你好呀</div>
<hr/>
<input type="button" value="测试" onclick="fun1()" />
</body>
</html>
五、删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1{
border: 1px solid red;
width: 80%;
height: 200px;
}
</style>
<script>
function fun1(){
var div1=window.document.getElementById("d1")
//通过js创建标签
var in1=document.createElement("input")
in1.setAttribute("type","text")
in1.setAttribute("value","请输入内容")
var in2=document.createElement("input")
in2.setAttribute("type","password")
in2.setAttribute("value","")
var in3=document.createElement("input")
in3.setAttribute("type","button")
in3.setAttribute("value","删除")
var in4=document.createElement("br")
in3.onclick=function(){
div1.removeChild(in1)
div1.removeChild(in2)
div1.removeChild(in3)
div1.removeChild(br)
}
div1.appendChild(in1)
div1.appendChild(in2)
div1.appendChild(in3)
div1.appendChild(br)
}
</script>
</head>
<body>
<div id="d1">
</div>
<input type="button" value="增加" onclick="fun1()" />
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/74204.html