常用的些操作
1,获取body元素
var bodyObj = document.getElementsByTagName("body")[0];
var bodyObj = document.body; 注意:尽量不要dom的body属性直接获取《body》直接访问,对浏览器支持不太好。
2,innerHTML innerText outerHTML 区别
innerHTML 包含html代码
innerText 只含有文字
outerHTML 包含本身及html代码
例子:
1 <div id="test"> 2 <span style="color:red">test1</span> test2 3 </div> 4 5 <a href="JavaScript:alert(test.innerHTML)">innerHTML内容</a> 6 <a href="javascript:alert(test.innerText)">inerHTML内容</a> 7 <a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
注意尽量使用innerHTML,innerText支持不是太好(好像只支持ie)
如果想用innerHTMl获取文本,可以使用一下代码(下获取整个html代码,再用正则表达式去除html标签)
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
加下东西
1 document.getElementById("demo").innerHTML="My First JavaScript Function";
修改值
1 document.getElementById("demo").innerHTML;获取值
3,通过js修改样式style
方法一 使用obj.className来修改样式表的类名
div1.style.backgroundColor = "red";
方法二、使用obj.style.cssTest来修改嵌入式的css
div1.style.cssText = "width:100%; height:100%; position: absolute;text-align: center";
div1.style.cssText = "background-color:black; display:block;color:White;";
方法三、使用obj.className来修改样式表的类名
div1.setAttribute('style' , 'width:100%; height:100%; position: absolute;text-align: center')
div1.className = "style2";
1 <style type="text/css"> 2 .style2{ 3 position: absolute; 4 width: 100%; 5 height: 100%; 6 text-align: center; 7 } 9 </style>
方法四、使用更改外联的css文件,从而改变元素的css
1 <link href="css1.css" rel="stylesheet" type="text/css" id="css"/> 2 div1.setAttribute("href","css1.css");