JavaScript--DOM基础
一、DOM查找方法
1.document.getElementById()
语法：document.getElementById(“id”)
功能：返回对拥有指定 ID 的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值
<body> <div class="box" id="box"> 元素 </div> <script> //获取id为box的这个元素 var box=document.getElementById("box"); console.log(box); /*<div class="box" id="box"> 元素 </div>*/ console.log(boxs);//null </script></body>2.document.getElementsByTagName()
语法：document.getElementsByTagName(“tag”)
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称
<ul id="list1"> <li>前端开发</li> <li>服务器端开发</li> <li>UI设计</li></ul><ol> <li>JavaScript原生</li> <li>JavaScript框架</li></ol><script> //获取页面中所有的li var lis=document.getElementsByTagName("li"); console.log(lis.length);//5 //获取id为list1下的所有li var lis2=document.getElementById("list1").getElementsByTagName("li"); console.log(lis2);//[li, li, li]</script>二、设置元素样式
语法：ele.style.styleName=styleValue
功能：设置ele元素的CSS样式
说明：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称(不能使用"-"连字符形式font-size，要使用驼峰命名形式fontSize)
3、styleValue为设置的样式值
<div class="box" id="box"> 元素</div><ul id="list"> <li>前端开发</li> <li>服务器端开发</li> <li>UI设计</li></ul><script> //设置id为box的这个元素的文字颜色 var box=document.getElementById("box"); box.style.color='#f00'; //属性是减号连接的复合形式时，必须转化为驼峰形式 box.style.fontWeight='bold'; var lis=document.getElementById("list").getElementsByTagName("li");//返回的是一个数组，不是一个dom对象 //遍历每一个li for(var i=0,len=lis.length;i<len;i++){ lis[i].style.color='#00f'; if(i==0){ lis[i].style.backgroundColor="#ccc"; }else if(i==1){ lis[i].style.backgroundColor='#ff0'; }else if(i==2){ lis[i].style.backgroundColor='#0f0'; } }</script> 三、innerHTML属性
语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的HTML
语法：ele.innerHTML=”html”
功能：设置ele元素开始和结束标签之间的HTML内容为html
<ul id="list"> <li><i>前端开发<i></li> <li><b>服务器端开发<b></li> <li>UI设计</li></ul><script> var lis=document.getElementById("list").getElementsByTagName("li"); for(var i=0,len=lis.length;i<len;i++){ console.log(lis[i].innerHTML); /*前端开发 服务器端开发 UI设计*/ /*<i>前端开发<i> <b>服务器端开发<b> UI设计*/ //lis[i].innerHTML=lis[i].innerHTML+'程序'; lis[i].innerHTML+='程序'; }</script> 四、className属性
语法：ele.className
功能：返回ele元素的class属性
语法：ele.className=”cls”
功能：设置ele元素的class属性为cls
<head> <meta charset="UTF-8"> <title></title> <style> .current{background:#ccc;color: #f00;} .on{border-bottom: 1px solid #0f0;} </style></head><body> <div class="box" id="box"> 元素 </div> <ul id="list"> <li><i>前端开发<i></li> <li><b>服务器端开发<b></li> <li class="on">UI设计</li> </ul> <script> var lis=document.getElementById("list").getElementsByTagName("li"); for(var i=0,len=lis.length;i<len;i++){ console.log(lis[i].innerHTML); lis[i].innerHTML+='程序'; lis[1].className="current"; lis[2].className="current"; //原来的被替换了 } console.log(document.getElementById("box").className);//box </script> </body>五、在DOM元素上添加删除获取属性
1.获取属性
语法：ele.getAttribute(“attribute”)
功能：获取ele元素的attribute属性
说明：
1、ele是要操作的dom对象
2、attribute是要获取的html属性(如：id、type)
2.设置属性
语法：ele.setAttribute(“attribute”,value)
功能：在ele元素上设置属性
说明：
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
3.删除属性
语法：ele.removeAttribute(“attribute”)
功能：删除ele上的attribute属性
说明：
1、ele是要操作的dom对象
2、attribute是要删除的属性名称
<body> <p id="text" align="center" class="text" data-type="title">文本</p> <input type="text" name="user" value="user" id="user" validate="true"/> <script> //获取属性 var p=document.getElementById("text"); var user=document.getElementById("user"); console.log(p.id);//text console.log(p.align);//center console.log(p.class);//undefined console.log(p.className);//text console.log(p.getAttribute("data-type"));//title console.log(user.type);//text 自带的属性可以直接获取 不需要用getAttribute console.log(user.getAttribute("validate"));//true //设置属性 //给p设置一个data-color的属性 p.setAttribute("data-color","red"); //给input设置一个isRed的属性 user.setAttribute("isRed","false"); //删除属性 //删除p上的align属性 p.removeAttribute("align"); </script> </body>注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。