DOM
2017-04-18 本文已影响0人
洛洛kkkkkk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM1</title>
<style type="text/css">
.first{
background: red;
}
</style>
</head>
<body>
<div class="first"><!--我是一个注释-->
我是一段文字
<span>我是一个标签</span></div>
</body>
<script type="text/javascript">
//节点树
//节点树就是我们所看到的用标签组成的一级一级的结构，可以称之为节点树，
// 每个标签都可以称之为一个节点
//节点不单单指标签，节点包括文本节点、注释节点、标签节点 每种节点的类型都不一样。
//（换行也算做是一个文本节点）
var div=document.querySelector(".first");
var body = document.querySelector("body");
console.log(div);
// childNodes所有的子节点。
console.log(div.childNodes);
//children 所有标签类型的子节点
console.log(div.children);
//t代表的是div的第一个标签节点，span
var t = div.children[0];
t.innerHTML="child人";
//使用className可以覆盖节点原来的类名，可以使用+=空格，类名 来添加类
div.className +=" asd";
//这种删除类名的方式很有问题
div.className=div.className.replace("asd","");
var a=document.createElement('a');
a.innerHTML="去哪里";
a.href="#";
// div.appendChild(a);
// div.insertBefore(a,div.childNodes[0]);
// cloneNode复制标签，那个元素调用这个函数，就复制哪个标签
// ,true代表深复制,会赋值子节点树,false代表浅复制,只复制节点本身
// var cDiv = div.cloneNode(true);
// body.appendChild(cDiv);
//节点的属性。
// div.index = 10;
// console.log(div.index);
// div.ccc=100;
// console.log(div.ccc);
//
// div.setAttribute('ddd',234);
// console.log(div.getAttribute('ddd'));
console.log(div.style.background);
// 获取计算后样式,正常的元素.style只能获取到行间里面的样式,想要获取CSS里面的样式
// 需要用到以下方法
//IE
// console.log(div.currentStyle.background)
//非IE
// console.log(getComputedStyle(div,null).background);
//浏览器兼容
function getstyle (key,element) {
if(element.currentStyle){
return element.currentStyle[key];
}else{
return getComputedStyle(element)[key];
}
}
console.log(getstyle("background",div));
</script>
</html>
