JavaScript之DOM编程(获取节点、删除节点、操作标签文本、操作节点属性、操作节点样式)

导读:本篇文章讲解 JavaScript之DOM编程(获取节点、删除节点、操作标签文本、操作节点属性、操作节点样式),希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

一、获取节点

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

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!