var a = 10;
alert("hello");
console.log("你好");
document.write("语句");
js操作属性
DOM是为了操作文档(网页)的API,document是它的一个对象
BOM是为了操作浏览器的API,window是它的一个对象
常用BOM对象还有:alert、定时器等
//整个文档加载完之后执行一个匿名函数
window.onload = function(){
document.getElementById('div1').title = "我看到了!";
//变量oA代表整个a标签
var oA = document.getElementById('link1');
oA.href = "http://www.tencent.com";
oA.title = "跳转到腾讯网"
alert(oA.id);
js操作style
window.onload = function() {
var oDiv = document.getElementById('div1');
/*style属性中的样式属性,没有"-"号的,写法相同*/
oDiv.style.color = 'red';
oDiv.style.background = 'gold';
/*
style属性中的样式属性,带"-"号的需要去掉"-"号,写成小驼峰式
例如:font-size属性要写为fontSize
*/
oDiv.style.fontSize = '30px';
js操作class属性
.box01{
width: 200px;
height: 200px;
background-color: gold;
}
.box02{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
// 由于class是js中的保留关键字,所以设置class属性时,要写为className
oDiv.className = 'box02';
js中括号操作符
window.onload = function(){
var oDiv = document.getElementById('div1');
//oDiv.style.color = 'red';//red必须加引号,否则会认为它是一个变量,引起来会认为它是一个值,赋值给=号左边
var attr = 'color';
// oDiv.style[attr] = 'red';
/* 通过[]操作属性可以写变量 */
oDiv['style'][attr] = 'red';
/* 通过innerHTML可以读写元素包括的内容 */
alert(oDiv.innerHTML);//读取标签里面包裹的元素,即“这是一个div元素”
var oDiv2 = document.getElementById('div2');
// oDiv2.innerHTML = '这是第二个div元素';//向div标签中插入内容
oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签
/*
document.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分