day17
javaScript DOM基础
DOM查找方法
语法：document.getElementById("id")
功能：返回对拥有指定ID的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值
语法：document.getElementsByIdTagName("tag");
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称
设置元素样式
语法：ele.style.styleName=styleValue
功能：设置ele元素的CSS样式
说明：
1,ele为要设置样式的DOM对象
2,styleName为要设置的样式名称
3,styleValue为设置的样式值
注意：
不能使用“-”连字符形式font-size使用驼峰命名形式fontSize
innerHTML
语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的HTML和文本内容
语法：ele.innnerHTML="html"
功能：设置ele元素开始和结束标签之间的HTML内容为html
className
语法：ele.className
功能：返回ele元素的class属性
语法：ele.className="cls"
功能：设置ele元素的class属性为cls
ele.className是重新设置类，替换元素本身的class
如果元素有2个以上的class属性值，那么获取这个元素的className属性时，
会将它的class属性值都打印出来
获取属性
语法：ele.getAttribute("attribute")
功能：获取ele元素的attribute属性
说明：
1,ele是要操作的dom对象
2,attribute是要获取的html属性(如：id、tpye)
获取标签属性语法：
DOM对象.属性，如p.id
设置属性
语法：ele.setAttribute("attribute",value)
功能：在ele元素上设置属性
说明：
1，ele是要操作的dom对象
2，attribute为要设置的属性名称
3,value为设置的attribute属性的值
1.setAttribute方法必须要有两个参数
2.如果value是字符串，需加引号
3.setAttribute()有兼容性问题
删除属性
语法：ele.removeAttribute("attribute")
功能：删除ele上的attribute属性
说明：
1，ele是要操作的dom对象
2，attribute是要删除的属性名称
DOM01.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="box" id="box"> yuansu1 </div> <ul id="list1"> <li>q</li> <li>w</li> <li>e</li> <li>r</li> </ul> <ol> <li>a</li> <li>s</li> </ol> <script> var box =document.getElementById('box'); console.log(box); var list1 = document.getElementsByTagName("li"); console.log(list1.length); var list2 = document.getElementById('list1').getElementsByTagName("li"); console.log(list2.length); </script> </body> </html>
DOM02.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="box" id="box"> yuansu1 </div> <ul id="list"> <li>无所谓</li> <li>你好，再见</li> <li>等等我</li> <li>等等我</li> </ul> <script> var box = document.getElementById('box'); box.style.color='#f00'; box.style.fontWeight='bolder'; var list = document.getElementById('list').getElementsByTagName('li'); for (var i= 0; i< list.length; i++) { if (i==0) { list[i].style.backgroundColor='#999'; } else if (i==2){ list[i].style.backgroundColor='#333'; } else if (i==3){ list[i].style.backgroundColor='#666'; } else { list[i].style.backgroundColor='#444'; } } </script> </body> </html>
DOM03.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .current{ background-color: #000; color: #f00; } .fontwe{ font-weight: bolder; } </style> </head> <body> <div class="box" id="box"> yuansu1 </div> <ul id="list"> <li>无所谓</li> <li class="fontwe">你好，再见</li> <li>等等我</li> <li>不等你</li> </ul> <script> var list = document.getElementById('list').getElementsByTagName('li'); for (var i= 0; i< list.length; i++) { console.log(list[i].innerHTML); list[i].innerHTML+="haha"; list[1].className='current'; console.log(list[1].className); } </script> </body> </html>
DOM04.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="text" class="text" align="center" datatype="title">文字</p> <script> var text = document.getElementById('text'); console.log(text.align); console.log(text.innerHTML); console.log(text.className); console.log(text.getAttribute('datatype')); text.setAttribute('varailgn',"center"); text.removeAttribute("align"); </script> </body> </html>