<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM基础</title>
</head>
<body>
<div id="box" title="标题" class="pox" style="color:red;" >测试DIV</div>
<input type="checkbox" name="test" value="单选框" checked="checked"/>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script>
window.οnlοad=function(){
var box=document.getElementById("box");
// alert(box.tagName); //获取元素节点的标签名
// alert(box.innerHTML) //获取元素节点的文本
// alert(box.id); //获取这个元素节点属性的值
// alert(box.title); //获取title属性的值
// alert(box.style); //获取style属性的值
// alert(box.style.color); //获取style属性对象中color属性的值
// alert(box.className); //获取class属性的值
// box.innerHTML="玩转<strong>JS</strong>" //赋值，可以解析HTML
var li=document.getElementsByTagName("li"); //传递一个标签名即可
// alert(li); //返回一个li数组的集合, HTMLCollection
// alert(li.length) ; //返回li数组的数量
// alert(li[0]); //返回li的节点对象， HTMLLIElement ,[0]表示第一个节点对象
// alert(li[0].tagName); // LI
// alert(li[0].innerHTML); //返回li的节点对象的文本值 , 1
var input=document.getElementsByName("test")[0];
// alert(input); //获取 input 元素
// alert(input.checked); //获取 input 元素的 checked 值
// alert(input.value); //获取 input 元素的 value 值
// box.setAttribute('align','center'); //设置属性和值
// box.removeAttribute('align'); //删除居中属性
}
/*
节点分为三类：
1.元素节点：其实就是标签，<div></div>；
2.文本节点：其实就是标签内的纯文本, "测试DIV"；
3.属性节点：其实就是标签的属性 , id="box" ；
DOM操作只会等HTML文档加载完毕之后，才可以获取
1：把<script>标签移到文档下面；
2：用onload事件，加载HTML文档；
window.οnlοad=function(){
//这里用来存放当网页所有内容加载完毕之后，再执行的代码
}；
查找元素:
1.getElmentById();参数传递一个元素的id值，获取到该元素节点
元素节点属性:
alert(document.getElementById("box").tagName; //获取元素节点的标签名
alert(document.getElementById("box").innerHTML); //获取元素节点的文本，（包含标签)
HTML属性：
alert(document.getElementById("box").tagName); //获取元素节点的标签名
alert(document.getElementById("box").innerHTML) //获取元素节点的文本
alert(document.getElementById("box").id); //获取这个元素节点属性的值
alertdocument.getElementById("box").title); //获取title属性的值
alert(document.getElementById("box").style); //获取style属性的值
alert(document.getElementById("box").style.color); //获取style属性对象中color属性的值
alert(document.getElementById("box").className); //获取class属性的值
以上是HTML属性的直接调用；
赋值，可以解析HTML:
document.getElementById("box").innerHTML="玩转<strong>JS</strong>"
2. document.getElementsByTagName(*)方法；将返回一个对象数组，这个数组保存着所有相同元素名的节点列表
alert(document.getElementsByTagName("li")); //返回一个li数组的集合, HTMLCollection
alert(document.getElementsByTagName("li").length) ; //返回li数组的数量
alert(ldocument.getElementsByTagName("li")[0]); //返回li的节点对象， HTMLLIElement，[0]表示第一个节点对象
alert(document.getElementsByTagName("li")[0].innerHTML); //返回li的节点对象的文本值 , 1
3.getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组 HTMLCollection(NodeList)。
document.getElementsByName('tes') //获取 input 元素
document.getElementsByName('tes')[0].value //获取 input 元素的 value 值
document.getElementsByName('tes')[0].checked //获取 input 元素的 checked 值
4.getAttribute()方法 将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有 一定区别。
document.getElementById('box').getAttribute('id'); //获取元素的 id 值
document.getElementById('box').id; //获取元素的 id 值
PS：HTML 通用属性 style 和 onclick，IE7 更低的版本 style 返回一个对象，onclick 返回 一个函数式。虽然 IE8 已经修复这个 bug，但为了更好的兼容，开发人员只有尽可能避免使 用 getAttribute()访问 HTML 属性了，或者碰到特殊的属性获取做特殊的兼容处理。
5.setAttribute()方法 setAttribute()方法将设置元素中某个属性和值。
它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。
document.getElementById('box').setAttribute('align','center'); //设置属性和值
6.removeAttribute()方法 removeAttribute()可以移除 HTML 属性。
document.getElementById('box').removeAttribute('style'); //移除属性
*/
</script>
</html>
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
