javascript入门基础篇重点第二节2._obox,赋值为网页中id为“box“的dom元素。用getelementbyid()函数实现。-优快云博客

本文详细介绍了如何使用JavaScript操作DOM元素的样式和属性，包括通过ID和类名选取元素、修改样式属性、添加类名及操作节点标签属性等。此外，还探讨了不同类型的运算符及其使用场景。

<!doctype html>
<html lang="en">
<head>

<meta http-equiv=$strIndex{1} content=$strIndex{2}>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<title></title>
<style type="text/css" id="style">
*{padding:0;margin:0;}
#box{width:100px;height:100px;background:#000;color:#fff;text-align:center;}
.jc{border-radius:10px;line-height:100px;font-weight:bold;}

</style>
</head>
<body>

<div id="box">123</div>
<script type="text/javascript">
//找到盒子对象
var oBox = document.getElementById("box");
var oStyle = document.getElementById("style");
//oBox.onclick = function(){
// oStyle.innerHTML += "#box{background:yellow;}";
//}

//当写多个样式的时候可以采用cssText
//oBox.style.background = "blue";
//oBox.style.border = "10px solid pink";
//oBox.style.width = "200px";
//oBox.style.cssText = "background:yellow;color:green;border:10px solid red;margin-left:10px;$keywordIndex{3}:right"；当要添加的css较多时候使用cssText属性对添加的样式一起添加

在js中添加符合属性时要去掉“-”，并且将符合属性的第一个单词大写，否则则是错误的
例如：
oBox.style.paddingLeft = "54px"; 正确
//oBox.style.padding-left = "54px"; 错误

//浮动 cssFloat时候其他浏览器，在IE6,7,8不支持,采用styleFloat
//oBox.style.cssFloat = "right";
//oBox.style.styleFloat = "right"; 兼容写法

</script>
</body>

</html

例题：
<div id="box" class="b">
</div>
var obox=document.gerElementById("box");
var bdom=document.gerElementsClassName("b");

根据id获取是静态方法，根据class获取的是动态方法
1.代码第二句是否还能执行已更改id名的背景颜色？
obox.id="oboxxxxx"
obox.style.background="yellow";
答案：可以
解析：虽然代码第一句已更改了obox的id名但是obox指向已保留到了内存中并且id名是唯一的不可从复的不存在重复的现象而且id获取是静态方法，以至obox.style.background还可以继续执行！

2.代码第二句是否还能执行已更改id名的背景颜色？
bdom.classname="bbbbb"
bdom.style.background="yellow";
答案：不可以
解析：虽然通过第一句找到了classname名但是由于calssname是可以重复的而且class获取的是动态方法，所以拿到的是一个数组集当执行到第二句的时候找到的bdom无法确定是具体的哪一个，从而又从顶部开始查询此时通过第一句js代码classname名已改变，从而找不到classname名为bdom的元素导致第二句无法执行!
解决方法：在第二句中的bdom以及获取classname后面加入[x]，指定是具体的哪一个bdom
如下：
var bdom=document.gerElementsClassName("b")[0];
bdom[0].style.background="yellow";

[ ]的讲解
在js代码中某一个属性要使用，但是不确定具体是什么属性的情况下，我们通常把它定义成一个变量，同时配合[ ]去使用。js代码中大部分用 . 描述的都可以用[ ]代替！
记住：[ ]里面的内容都是字符串！
例如：不清楚你传入的是宽度还是边框等属性，就可以采取【】！(了解例子，以后就懂了)
function setStyle(attr,value){
oBox.style[attr] = value;
}
setStyle("border","10px solid #000");

setStyle("width","200px");

例题：

var oBox = document.getElementById("box");

var attr = "width";
oBox.onclick = function(){
this.style[attr] = "200px";
}

例如
function set(key,value){
oBox.style[key] = value;
};

set("border","10px solid red");

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

根据需求添加样式

var oBox = document.getElementById("box");

.jc{width:500；height:500px;background:yellow;}

例如：

obox.onmousever=function(){

this.className += "jc"---------为obox添加classname名为.jc的样式

在js中class为关键字，所以要改为className

};

如何用js操作节点标签属性

</div>

var obox=document.getElementById("box");

alert(obox.document.getElementsClassName("p"))

拿到id名为obox的div下面class名为p的节点标签

合法标签属性-------》对象，属性

alert(obox.Id+"===="+obox.className+"===="+obox.style);

自定义标签

</div>

获得自定义属性的值的方法

obox.kery="xx"

getAttribute(key,value);

用法：getAttribute("kery","xxxx");更改名为kery的样式

alert(obox.getAttribute("kery"));

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
运算符的讲解
算数运算符 + - * / % ++ -- （运算优先级 (++a与a++的区别是什么？) ）
赋值运算符 = += -= *= /= %=
比较运算符 < > <= >= != （== 与 === 的区别是什么？）
逻辑运算符 &&（短路） || ！（& 与 && 的区别是什么？）
条件运算符 ( * )? * : * （三目运算符的好处是什么？）
移位运算符 & | ^ ~ << >> （熟悉简单的按位计算）

a++与++a区别：

文章最后面试经典题说明

注意！== 和===判别更加严格，不仅值相同，而且数据类型相同

==是松散相等于

===严格相等于

var a = 10;
var b = "10";
if(a==b){
alert("等于");
}else{
alert("不等于");
}

逻辑运算符
& 与 && 的区别是什么
&&--->y=0 &---->y=1
if(10<3 && ++y>0){
alert("1");
}else{
alert("2");
}
alert(y);如果是&&在if里面执行判断时判断到第一个不成立时即（10<3）则不会继续判断即（ ++y>0）的真假，直接执行if下面函数，而&则与之相反.