首页 > 代码库 > document对象操作:浏览器页面文件

document对象操作:浏览器页面文件

//找元素

1.根据id找

<div id="d1" cs="ceshi"><span>document对象</span></div>

//var d1 = document.getElementById("d1");
//alert(d1);

2.根据class找

<div class="d">111</div>
<span class="d">222</span>

 

//var d2 = document.getElementsByClassName("d");
//alert(d2[1]); //d2[] 框中是想要显示的索引号,d2[0]就是显示的div,d2[1]就是显示的span

3.根据标签名找

//var d3 = document.getElementsByTagName("div");
//alert(d3[0]);

4.根据name找

<input type="text" name="aa" id="b1" value="http://www.mamicode.com/biaodan" />
<input type="text" name="aa" />

//var d4 = document.getElementsByName("aa");
//alert(d4[0]); ////d4[] 和上面的d2一样

 

//操作元素:操作内容、操作属性、操作样式

<style type="text/css">
#d3{ color:red}
</style>

<body>

<div id="d1" cs="ceshi"><span>document对象</span></div>

<div class="d">111</div>
<span class="d">222</span>

<input type="text" name="aa" id="b1" value="http://www.mamicode.com/biaodan" />
<input type="text" name="aa" />

<div id="d3" style="width:100px; height:100px; background-color:#636">111</div>

<input type="button" value="http://www.mamicode.com/获取" onclick="showa()" />
<input type="button" value="http://www.mamicode.com/设置" onclick="set()" />

</body>

1.操作内容:非表单元素、表单元素
非表单元素
//var d1 = document.getElementById("d1");
//1.获取文本
//alert(d1.innerText);
//2.设置文本
//d1.innerText = "hello";
//3.获取html代码
//alert(d1.innerHTML);
//4.设置html代码
//d1.innerHTML = "<b>加粗文字</b>";

表单元素
//var b1 = document.getElementById("b1");
//1.赋值
//b1.value = "http://www.mamicode.com/ceshi";
//2.获取值
//alert(b1.value);

2.操作属性
//1.添加属性
//var d1 = document.getElementById("d1");
//d1.setAttribute("bs","1");
//2.获取属性
//alert(d1.getAttribute("cs"));
//3.移除属性
//d1.removeAttribute("cs");

3.操作样式
function showa()
{
//1.获取样式,只能获取内联样式
var d3 = document.getElementById("d3");
alert(d3.style.color);
}
function set()
{
var d3 = document.getElementById("d3");
//2.设置样式
d3.style.backgroundColor = "red";
}

document对象操作:浏览器页面文件