DOM类

来源：互联网发布：云计算项目实施方案编辑：程序博客网时间：2024/06/09 17:19

}DOM 中的三个字母，D（文档）可以理解为整个Web 加载的网页文档；O（对象）可以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。

}DOM 有三个等级，分别是DOM1、DOM2、DOM3，并且 DOM1在 1998 年 10 月成为W3C 标准。DOM1 所支持的浏览器包括IE6+、Firefox、Safari、Chrome和 Opera1.7+。

}PS：IE 中的所有DOM 对象都是以 COM对象的形式实现的，这意味着 IE 中的DOM可能会和其他浏览器有一定的差异。

样本1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="color: red;">测试DIV</div>
</body>
</html>

<script type="text/javascript">
var div1 = document.getElementById("div1");
//使用元素节点.getAtrribute("属性节点名称"); 得到DIV元素 ID属性的值
var idVal = div1.getAttribute("style");
alert(idVal);
alert(idVal.nodeType);

//使用元素节点.setAtrribute("属性节点名称",属性值); 修改对于属性的值
// div1.setAttribute("id","div2");
// //使用元素节点.removeAttribute("属性节点名称");
// div1.removeAttribute("id");

// var d1 = document.getElementById("div1");
// var d2 = document.getElementById("div2");
// alert("d1:"+d1.getAttribute("id"));
// alert("d2:"+d2.getAttribute("id"));
</script>

样本2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>你喜欢的运动：</h3>
<ul id="sport">
</ul>

<h3>你喜欢的游戏：</h3>
<ul id="game">
</ul>

<form onsubmit=" return _click()">
<input checked="checked" type="radio" name="type" value="sport"/>运动
<input type="radio" name="type" value="game"/>游戏
<input type="text" name="context" />
<input type="submit" id="submit" value="提交" />
</form>
</body>
</html>

<script type="text/javascript">

function _click () {
//1、先查看单选项是否选中
//得到担心项集合
var types = document.getElementsByName("type");
//定义一个变量，存储单选项的值
var riVal = "";
for(var i = 0;i<types.length;i++){
var rObj = types[i];
//rObj.checked 返回的是 true 或 false
if(rObj.checked){
//true 选中
riVal = rObj.value;
break;
}
}

//2、处理输入框的输入内容
//得到输入框的值
var str = document.getElementsByName("context")[0].value;
var sval = str.trim();//处理字符串的前后空格
//判断处理前后空格之后的值是否为null 为空给提示信息
if(sval ==""){
alert("请输入值！！");
return false;
}

//3、得到对应添加节点
var cNode = document.getElementById(riVal);

//4、创建元素节点
var cel = document.createElement("li");

//5、创建文本节点
var cTe = document.createTextNode(sval);

//6、把文本节点添加到对应的元素节点中
cel.appendChild(cTe);

//7、把元素节点添加到对应的元素节点中
cNode.appendChild(cel);

//为了让form表单提交不跳转页面
return false;
}
</script>

阅读全文

0 0