文章目录
一、创建节点
1.1、createElement创建
- (1)在内存中创建一个DOM对象
- (2)、先给这个对象设置样式,用点的方式
- (3)把创建的DOM对象追加到DOM树里面appendChild()
- 语法
新标签(元素节点)=document.createElement(‘标签名’);
- 代码
//创建节点
var a1=document.createElement('div');
- 作用:可以创建一个不存在的标签名字
- 例子:点击按钮,创建ul
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">
</div>
<script>
// 模拟数据
var arr=["苹果",'橘子','梨子'];
var btn=document.getElementById('btn');
var box=document.getElementById('box');
btn.onclick=function () {
var ul=document.createElement('ul');
box.appendChild(ul);
for(var i=0;i<arr.length;i++){
var data=arr[i];
var li=document.createElement('li');
//把li放到DOM树中,并且重新绘制
ul.appendChild(li);
// 设置li的显示内容
// 有兼容性
setInnerText(li,data);
}
}
// 设置标签之间的内容
function setInnerText(element,content) {
// 判断当前浏览器时否支持innerText
if(typeof element.innerText==="string"){
element.innerText=content;
}
else {
element.textContent=content;
}
}
</script>
</body>
</html>
1.2、document.write()
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<script>
var btn=document.getElementById('btn');
btn.onclick=function () {
document.write('<p>我是动态创建的</p>')
}
</script>
</body>
</html>
- 结果:
点击之后
注意:这个方法会把之前整个页面覆盖掉,所以这个方法很局限,用的会很少
- 应用:在网页中需要加入广告的时候,由广告商给你两行代码添加到其他页面上
代码:
网页上:
点击后就会跳转的新页面
1.3、element.innerHTML=‘’
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">
</div>
<script>
var btn=document.getElementById('btn');
btn.onclick=function () {
var box=document.getElementById('box');
box.innerHTML='<p>我是属性创建的</p>'
}
</script>
</body>
</html>
-
结果·:他只是写进去 不覆盖
-
应用数据交互
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">
</div>
<script>
// 模拟数据
var arr=["苹果",'橘子','梨子'];
var btn=document.getElementById('btn');
btn.onclick=function () {
var box=document.getElementById('box');
box.innerHTML='<ul>';
for(var i=0;i<arr.length;i++){
box.innerHTML+=`<li>${arr[i]}</li>`;
}
box.innerHTML+='</ul>'
// var box=document.getElementById('box');
// box.innerHTML='<p>我是属性创建的</p>'
}
</script>
</body>
</html>
点击之后:
- 优化,多次修改dom树,导致效率低,所以用变量存储这个,等连接好后再写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">
</div>
<script>
// 模拟数据
var arr=["苹果",'橘子','梨子'];
var btn=document.getElementById('btn');
btn.onclick=function () {
var box=document.getElementById('box');
// 优化 有个dom树每当修改就对dom树重新来操作
var content='<ul>';
for(var i=0;i<arr.length;i++){
content+=`<li>${arr[i]}</li>`;
}
content+='</ul>'
// var box=document.getElementById('box');
box.innerHTML=content
}
</script>
</body>
</html>
1.4、性能
innerHtml>creatElement>document.write
二、插入节点
2.1、最后插入appendChild
父节点.appendChild(新的子节点);
- 在父节点的最后插入一个新的子节点
2.2、参考前插入一个节点insertBefore
父节点.insertBefore(新的子节点,作为参考的子节点)
- 解释:在参考节点前插入一个新的节点,如果参考节点为null,那么它将在父节点里面的最后插入一个子节点
2.3、强调
- appendChild可以移动元素
<div class="box11">
<div class="box12">生命壹号</div>
</div>
<div class="box21">
<div class="box22">永不止步</div>
</div>
上方结构中,子盒子box12是在父亲box11里的,子盒子box22是在父亲box21里面的。现在,如果我调用方法box11.appendChild(box22),最后产生的结果是:box22会跑到box11中(也就是说,box22不在box21里面了)。这是一个很神奇的事情:
三、删除节点removeChild
- 格式
父节点.removeChild(子节点);
- 代码
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
var a=document.getElementsByTagName('ul')[0];
a.removeChild(document.getElementsByTagName('li')[0])
</script>
解释:用父节点删除子节点,必须要指定是删除那个子节点
- 要删除自己的节点
node1.parentNode.removeChild(node1);
四、复制节点(克隆节点)
4.1、直接获取
- 格式
要复制的节点.cloneNode(); //括号里不带参数和带参数false,效果是一样的。
要复制的节点.cloneNode(true);
括号里带不带参数,效果是不同的。解释如下:
不带参数/带参数false:只复制节点本身,不复制子节点。
带参数true:既复制节点本身,也复制其所有的子节点。
4.2、替换节点replaceChild(新的节点,旧的节点)
- 代码·
replaceNode=pareNode.replacrChild(newChild,oldChild);
- newChild用来替换oldChild的新节点。如果该节点已经存在DOM树中,则它会被从原始的位置删除。
- oldChild 被替换的原始节点
- replaceChild和oldChild相等
五、设置节点的属性
- 我们可以获取节点的属性值,设置节点的属性值,删除节点的属性
5.1、获取节点属性
元素节点.属性名;元素节点[属性名];
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var myNode = document.getElementsByTagName("img")[0];
console.log(myNode.src);
console.log(myNode.className); //注意,是className,不是class
console.log(myNode.title);
console.log("------------");
console.log(myNode["src"]);
console.log(myNode["className"]); //注意,是className,不是class
console.log(myNode["title"]);
</script>
</body>
5.2 用方法二、getAttribute()
- 格式
元素节点.getAttribute(“属性名称”);
- 举例
console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class,不是className
console.log(myNode.getAttribute("title"));
5.3、设置属性
- (1)、设置节点的属性值
myNode.src = "images/2.jpg" //修改src的属性值
myNode.className = "image2-box"; //修改class的name
- (2)、设置节点属性值
myNode.setAttribute("src","images/3.jpg");
myNode.setAttribute("class","image3-box");
myNode.setAttribute("id","你好");
- (3)、删除节点的属性
格式
元素节点.removeAttribute(属性名);
myNode.removeAttribute("class");
myNode.removeAttribute("id");
5.4、总结
<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
var div = document.getElementById("box");
//采用方式一进行set
div.aaaa = "1111";
console.log(div.aaaa); //打印结果:1111。可以打印出来,但是不会出现在标签上
//采用方式二进行set
div.setAttribute("bbbb","2222"); //bbbb作为新增的属性,会出现在标签上
console.log(div.getAttribute("aaaa")); //打印结果:null。因为方式一的set,无法采用方式二进行get。
console.log(div.bbbb); //打印结果:undefined。因为方式二的set,无法采用方式一进行get。
</script>
</body>