window.document对象
一查找元素
1、找元素
<script type="text/javascript">
</script>
id查找
document.getElementById("id名字")；
根据class找
document.getElementsByClassName（"class名字"）；
根据标签名字找
document.getElementsByTagName("标签的名字")；
表单可以用name找
document.getElementByName（"name的值"）
2、对应css里面
<style type="text/css">
</style>（只能写在head里）
id是#加id名{ }
class是.加class名{ }
标签直接用标签名{ }
二实例
JS中id和css中id
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#s{
width:300px;
height:300px;
background-color:#0F0;
}
</style>
</head>
<body>
<div id="s"></div>
</body>
<script type="text/javascript">
var a=document.getElementById("s")
</script>
JS中class和css中class
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#s{
width:300px;
height:300px;
background-color:#0F0;
}
.d{
border:2px solid #F00;
}
</style>
</head>
<body>
<div id="s" class="d"></div>
</body>
<script type="text/javascript">
var a=document.getElementById("s");
var b=document.getElementsByClassName("d")
</script>
JS中标签和css中标签
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#s{
width:300px;
height:300px;
background-color:#0F0;
}
.d{
border:2px solid #F00;
}
div{
color:#F0F;
}
</style>
</head>
<body>
<div id="s" class="d">你在</div>
</body>
<script type="text/javascript">
var a=document.getElementById("s");
var b=document.getElementsByClassName("d");
var c=document.getElementsByTagName("div");
</script>
三操作
操作内容
a.innerHTML="修改后的内容"
<script type="text/javascript">
var a=document.getElementById("s");
var b=document.getElementsByClassName("d");
var c=document.getElementsByTagName("div");
a.innerHTML="<font color='green'>我我我</font>"
</script>
a.innerText=''修改后的内容''
<script type="text/javascript">
var a=document.getElementById("s");
var b=document.getElementsByClassName("d");
var c=document.getElementsByTagName("div");
a.innerText="<font color='green'>我我我</font>"
</script>
操作属性
a.setAttribute("属性名","属性值")修改或者添加属性
<body>
<div id="s" class="d"><font id="f" color="#000000">你在</font></div>
</body>
<script type="text/javascript">
var a=document.getElementById("f");
var b=document.getElementsByClassName("d");
var c=document.getElementsByTagName("div");
a.setAttribute("color","#666")
</script>
a.getAttribute("属性名")获取属性
a.removettribute(属性名")移除属性
<body>
<div id="s" class="d"><font id="f" color="#000000">你在</font></div>
</body>
<script type="text/javascript">
var a=document.getElementById("f");
var b=document.getElementsByClassName("d");
var c=document.getElementsByTagName("div");
a.getAttribute("color")
a.removeAttribute("color")
</script>
操作样式
a.style.样式名=''修改后的样式值"
只能获取内联样式不能获取内嵌和外部样式但是都能修改
var w=a.style.backgroundColor在下面例子中无效获取不了背景色因为是内嵌；a.style.backgroundColor="#666"有效；能改
<body>
<div id="s" class="d">你在</div>
</body>
<script type="text/javascript">
var a=document.getElementById("s");
var b=document.getElementsByClassName("d");
var c=document.getElementsByTagName("div");
a.style.backgroundColor="#666"
</script>
