你好javascript day10
1）DOM
window BOM的根元素
document DOM的根元素
window.document document属于window属性
BOM
window.location
window.history
window.navigator
window.document
window.screen
nodeName节点名
所有的文本节点名都是#text
所有的注释的nodeName是#comment
childNodes 子节点
children 子元素
parentNode 父节点
parentElement 父元素
firstChild 第一个子节点
firstElementChild 第一个子元素
lastChild 最后一个子节点
lastElementChild 最后一个子元素
nextSibling 下一个兄弟节点
nextElementSibling 下一个兄弟元素
previousSibling 上一个兄弟节点
previousElementSibling 上一个兄弟元素
nodeValue 节点值
》如果是文本就显示文本内容
》如果是标签元素nodeValue是null
》如果是注释，nodeValue就是注释内容
nodeType 节点类型
document.getElementById（）；根据id获取标签元素
document.getElementsByTagName（）；根据标签名获取标签列表 不可以通过父元素获取
document.getElementsByClassName（）；根据className获取标签列表
document.querySelector（）；根据选择器获取到第一个找到的元素
document.querySelectorAll（）；根据选择器获取到所有的元素
2）元素操作
innerHTML
document.write
textContent 文本内容
document.createElement(标签名) 根据标签名创建标签元素
父容器.appendChild(子元素); 将子元素插入在父容器的尾部
// 给ul创建若干子元素
var ul=document.querySelector("ul");
for(var i=0;i<10;i++){
var li=document.createElement("li");
li.textContent=i;
ul.appendChild(li);
}
// 创建超链接列表
var arr=[
{site:"网易",url:"http://www.163.com"},
{site:"腾讯",url:"http://www.qq.com"},
{site:"百度",url:"http://www.baidu.com"},
{site:"京东",url:"http://www.jd.com"},
{site:"谷歌",url:"http://www.google.com"},
{site:"淘宝",url:"http://www.taobao.com"},
];
// var ul=document.querySelector("ul");
// 使用DOM解决
for(var i=0;i<arr.length;i++){
var li=document.createElement("li");
var a=document.createElement("a");
a.href=arr[i].url;
a.textContent=arr[i].site;
li.appendChild(a);
ul.appendChild(li);
}
// 使用InnerHTML解决
var str="";
for(var i=0;i<arr.length;i++){
str+="<li>";
str+="<a href='"+arr[i].url+"'>"
str+=arr[i].site;
str+="</a>";
str+="</li>"
}
ul.innerHTML=str;
var div=document.createElement("div");
document.body.appendChild(div);
var img=document.createElement("img");
img.src="1.png";
document.body.appendChild(img);
父容器.insertBefore(要插入的元素，插入在谁的前面)；
创建文本节点 document.createTextNode("文本");
元素.cloneNode(深度布尔值)
》false 浅复制 仅复制元素，不复制内容和子元素
》true 深复制 可以将元素和元素里面的内容及子元素都复制进去
》不管是浅复制或者深复制 都会将标签的属性全部复制，因此id可能会产生问题
》所有有id的标签都需要重新设置id
元素.remove(); 元素自身删除
父容器.removeChild(子元素); 父容器删除子元素
父容器.replaceChild(新的元素，要替换的元素);
点击添加元素
<body>
<button>按钮</button>
<!-- <div id="div0">
</div> -->
<!-- <script>
var bn=document.querySelector("button");
var div=document.getElementById("div0");
var str=""
bn.onclick=function(){
var num=Math.floor(Math.random()*80+20);
str+="<div style=";
str+="width:"+num+"px;";
str+="height:"+num+"px;";
str+="background-color:"+randomColor()
str+="></div>"
console.log(div.innerHTML+str)
// 将原来的覆盖掉
div.innerHTML=div.innerHTML+str;
}
//随机颜色函数
function randomColor(){
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);
}
return col;
}
</script> -->
<script>
init();
function init(){
var bn=document.querySelector("button");
bn.onclick=clickHandler;
}
function clickHandler(){
var div=document.createElement("div");
div.style.width=div.style.height=Math.floor(Math.random()*80+20)+"px";
div.style.backgroundColor=randomColor();
div.style.position="absolute";
div.style.left=Math.floor(Math.random()*1000)+"px";
div.style.top=Math.floor(Math.random()*600)+"px";
document.body.appendChild(div);
}
function randomColor(){
var col="#";
for(var i=0;i<6;i++){
col+=Math.floor(Math.random()*16).toString(16);
}
return col;
}
</script>
</body>
