<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
// var div1 = document.getElementById("d1");
//getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
// var divArr = document.getElementsByTagName("div");
//getElementsByName() 方法可返回带有指定名称的对象的集合。
// var div1 = document.getElementsByName("txt1");
alert(getElesByClassName("d1").length);
};
function getElesByClassName(className) {
// var eles = document.getElementsByTagName("*");
if(document.all) {
var tags = document.getElementsByTagName("*");
var arr = [];
for(var i= 0 ; i < tags.length; i++) {
if(tags[i].className == className) {
arr.push(tags[i]);
}
}
return arr;
} else {
return document.getElementsByClassName(className);
}
}
</script>
</head>
<body>
<div class="d1" id="d1" name="d1">测试数据</div>
<div class="d1" id="d2" name="d1">测试数据</div>
<form action="">
<input type="text" name="txt1"/>
<input type="text" name="txt1"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var out = document.getElementById("out");
var arr = getChildren(out);
// alert(arr.length);
};
//获取子节点的方法
function getChildren(obj) {
//获取该对象下面所有的子元素
var children = obj.childNodes;
alert(children.length);
var arr = [];
for(var i = 0; i < children.length; i++) {
alert(children[i].nodeType + " " + children[i].nodeName + " " + children[i].nodeValue);
//排除掉换行的节点
if(children[i].nodeType == 3 && /^\s+$/.test(children[i].nodeValue)) {
} else {
arr.push(children[i]);
}
alert(children[i].nodeType);
}
return arr;
}
</script>
</head>
<body>
<div id="out">
测试数据
<p>测试数据一</p>
<!-- 测试数据 -->
<div id="inner">
<h1>测试数据二</h1>
</div>
<h3>测试数据三</h3>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.out {
300px;
height: 300px;
padding: 1px;
margin: 50px;
}
.inner {
150px;
height: 150px;
margin: 75px;
}
</style>
<script type="text/javascript">
function copy() {
//深度克隆 true
var obj = document.getElementById("out").cloneNode(false);
document.getElementById("out1").appendChild(obj);
}
</script>
</head>
<body>
<div id="out" class="out">
<div class="inner"></div>
</div>
<div id="out1"></div>
<a href="javascript: copy()">复制</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
function login() {
var div = document.createElement("div");
div.style.width = "600px";
div.style.height = "300px";
div.style.backgroundColor = "#999999";
div.style.position = "absolute";
div.style.top = "100px";
div.style.left = ((window.innerWidth - 600) / 2) + "px";
var btn = document.createElement("a");
btn.innerHTML = "X";
btn.style.display = "block";
btn.style.width = "20px";
btn.style.height = "20px";
btn.style.backgroundColor = "red";
btn.style.float = "right";
btn.onclick = function() {
document.body.removeChild(div);
div = null;
};
div.appendChild(btn);
document.body.appendChild(div);
}
</script>
</head>
<body>
<a href="javascript: login()">登录</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var out = document.getElementById("out");
var btn = document.getElementById("btn");
// var arr = getChildren(out);
// var obj = arr[1];
// var o = getNextEle(obj);
// alert(o.nodeName);
// alert(out.lastChild.nodeName);
var last = getLastEle(out);
alert(last.nodeName);
};
//获取子节点的方法
function getChildren(obj) {
//获取该对象下面所有的子元素
var children = obj.childNodes;
var arr = [];
for(var i = 0; i < children.length; i++) {
// alert(children[i].nodeType + " " + children[i].nodeName + " " + children[i].nodeValue);
//排除掉换行的节点
if(children[i].nodeType == 3 && /^\s+$/.test(children[i].nodeValue)) {
} else {
arr.push(children[i]);
}
// alert(children[i].nodeType);
}
return arr;
}
//下一个兄弟节点
function getNextEle(obj) {
var next = obj.nextSibling;
while(next.nodeType == 3 && /^\s+$/.test(next.nodeValue)) {
next = next.nextSibling;
}
return next;
}
//最后一个节点
function getLastEle(obj) {
var last = obj.lastChild;
while(last.nodeType == 3 && /^\s+$/.test(last.nodeValue)) {
last = last.previousSibling;
}
return last;
}
</script>
</head>
<body>
<div id="out">
测试数据
<p>测试数据一</p>
<!-- 测试数据 -->
<div id="inner">
<h1>测试数据二</h1>
</div>
<h3>测试数据三</h3>
</div>
<input type="button" id="btn"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function add() {
var txt = document.createTextNode("test");
var p = document.createElement("p");
p.appendChild(txt);
var div1 = document.getElementById("div1");
// div1.insertBefore(p, document.getElementById("p2"));
div1.replaceChild(p, document.getElementById("p2"));
}
function add1() {
var p1 = document.getElementById("p1");
alert(p1.innerHTML);
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">测试数据1</p>
<p id="p2">测试数据1</p>
</div>
<a href="javascript:add();">点击</a>
<a href="javascript:add1();">点击1</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style type="text/css">
body,h3{
margin: 0;
padding:0;
}
#showinfo{
300px;
height: 500px;
}
</style>
</head>
<body>
<div id="showinfo">
</div>
<input id="inp" type="" value="">
<a href="javascript:getinfo()">send</a>
<a href="javascript:clear()">clear</a>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function getinfo(){
var info = $('inp').value;
var pnode = document.createElement("p");
var infonode = document.createTextNode(info);
pnode.appendChild(infonode);
var h3node = document.createElement("h3");
var namenode = document.createTextNode("ck:");
h3node.appendChild(namenode);
$('showinfo').appendChild(h3node);
$('showinfo').appendChild(pnode);
}
function clear(){
var nodelist = $('showinfo').childNodes;
// for(var i = 0;i<nodelist.length;){
// $('showinfo').removeChild(nodelist[0]);
// }
var tempnum = nodelist.length;
for(var i = 0;i<tempnum;i++){
$('showinfo').removeChild(nodelist[0]);
}
}
</script>
</body>
</html>