特别注意:操作方式 dom 要等结点初始化完后，就可以竭尽全力。 即 domready,作法三种:
1).把 script 初始化条码移到 html 结尾方可；2).采用 onload 该事件来处置 JS，等候 html 读取完再读取 onload 该事件里的 JS。
window.onload = function () { //预读取 html 后竭尽全力执行};
1)、 getElemen
3)、 getElementsByClassName() 依照式样名获取 dom 第一类字符串
<html>
<head>
<meta charse font-size: 20px;
}
</style>
</head>
<body>
<p id=”p1″ name=”p” class=”mypara”>自学的安全感才是技术创新的原动力</p>
<p id=”p1″ name=”p” class=”mypara”>programming is so easy…</p>
浓厚兴趣 <br/>
<input type=”text” value=”天气情况转冷特别注意御寒”/> <br />
<input type=”checkbox” value=”1″ name=”fav”>常量<br />
<input type=”checkbox” value=”2″ name=”fav”>趴床<br/>
<input type=”checkbox” value=”3″ name=”fav”>体育运动<br/>
<hr />
<a href=”javasclassname获
取原素
</a>
</body>
<script type=”text/javascript”>
/tByTagName(){
var elements =document.getElementsByTagName(“input”);
var checkStr =””;
for(var i=0;i<elements.length;i++){
var e =elements[i];
if(e.type == “text”){
alert(e.value);
}else if(e.type==”checkbox”){
checkStr += e.value+”–“;
ClassName(){
var elements =document.getElementsByClassName(“mypara”);
for(var i=0;i<elements.length;i++){
alert(elements[i].tagName+”–>”+elements[i].innerHTML);
}
ByName(“fav”);
for(var i=0;i<elements.length;i++){
alert(elements[i].tagName+”->”+elements[i].type+”–>”+
elements[i].value);
}
}
</script>
</html>
2、新增结点
DOM 不单单可以查找结点，也可以创建结点、 插入结点
1)、 write() 把任意字符串插入到文档中
document.write(
这是一个段落！
); //输出任意字符串
2)、 createElement() 创建一个原素结点
3)、 appendChild() 将新结点追加到子结点列表的结尾
4)、 createTextNode() 创建一个文件结点
5)、 insertBefore() 把结点创建到指定结点的前面。
6)、 createDocumentFragment() 创建文档碎片结点，作为添加入真正父结点的中间环节，提升效率。
代码1：
<head>
<script>
function addPara(){
//创建段落
var p =document.createElement(p);
//p.innerHTML=”以后的你会感谢现在努力的你”;
//或者
var txt=document.createTextNode(“以后的你会感谢现在努力的你”);
);
//添加
container.appendChild(p);
}
function addImg(){
//创建图片
var img = document.createElement(“img”) ;
img.src =”http://www.baidu.com/img/bd_lontainer =document.getElementById(“container”);
container.appendChild(img);
}
function addTxt(){
//创建文本框
var txt =document.createElement(“input”);
//设置类型
/*
txt.type =”text”;
txt.value =”添加成功”;
*/
//或者
txter =document.getElementById(“container”);
container.appendChild(txt);
}
function addOptions(){
//第一种方式
/*//创建下拉项
var option = document.createElement(“opdocument.getElementsByTagName(“select”)[0];
//添加 下拉项
sel.appendChild(option);
*/
//第二种方式:
var option = document.createElement(“option”) ;
option.value =select”)[0];
//添加下拉项
sel.options.add(option);
//第三种方式: 添加下拉项
/*
var sel=document.getElementsByTagName(“select”)[0];
sel.innerHTML=sel.innerHTML + “<option value = 2>油菜花</option>” ;””;
*/
}
</script>
</head>
<body>
<button onclick=”addPara();”>添加段落</button>
<button onclick=”addTxt();”>添加文本框</button>
<button onclick=”addImg();”>添加图片</button>
<button onclick=”addOptions()”>添加选项</button>
<br />
<select name=”music”>
<option value=”-1″>勋章</option>
<option value=”0″>凉凉</option>
<option value=”1″>大碗宽面</option>
</select>
<div id = “container”></div>
</body>
代码2：
<head>
<script type=”text/javascript”>
function insertNode(){
//插入原素
var span=document.createElement(“span”);
span.innerHTML =”码农 ”;
var pro =document.getElementById(“progarmmer”);
//pro.parentNode.insertBefore(span,null); //等同于
pro.parentNode.appendChild(span)
pro.parentNode.insertBefore(span,pro); //在 pro 前添加新原素
}
function appendNode(){
//追加原素
var span=document.createElement(“span”);
span.innerHTML =” 程序媛”;
var pro =document.getElementById(“progarmmer”);
pro.parentNode.insertBefore(span,pro.nextSibling); //在本原素的后面一
个的前面
}
</script>
</head>
<body>
<span id=”progarmmer”>程序猿</span>
<span id=”progarmmer_lion”>攻程狮</span>
<a href=”javascript:void(0)” onclick=”insertNode();”>前添加</a>
<a href=”javascript:void(0)” onclick=”appendNode();”>后追加</a>
</body>
3、修改结点
1)、 replaceChild() 将新结点替换旧结点
2)、 cloneNode() 复制结点
<head>
<script type=”text/javascript”>
function testReplace(){
var progarmmer =document.getElementById(“progarmmer”);
var p =document.createElement(“p”);
p.innerHTML =”被替换了…”;
progarmmer.parentNode.replaceChild(p,progarmmer);
}
function testClone(){
var progarmmer =document.getElementById(“progarmmer”);
var clone = progarmmer.cloneNode(true); //克隆 true 包括内容
progarmmer.parentNode.appendChild(clone);
}
</script>
</head>
<body>
<span id=”progarmmer”>程序猿</span>
<button onclick=”testClone()”>克隆</button>
<button onclick=”testReplace()”>替换</button>
</body>
4、移除结点
removeChild() 移除结点
<head>
<script type=”text/javascript”>
function delNode(){
var programmer =document.getElementById(“programmer”);
programmer.parentNode.removeChild(programmer);
}
</script>
</head>
<body>
<span id=”programmer”>程序猿</span>
<a href=”javascript:void(0)” onclick=”delNode();”>删除</a>
</body>
