一文详解Javascript DOM树结构

什么是DOM树？

DOM（Document Object Model）即文档对象模型。通过DOM树这样一种结构，不​仅可以直观的看到HTML的整体结构，还可以利用DOM树的一些属性获取到某个元素的子节点和节点名称等信息。

安丘网站建设公司成都创新互联,安丘网站设计制作，有大型网站制作公司丰富经验。已为安丘成百上千家提供企业网站建设服务。企业网站搭建\外贸网站建设要多少钱，请找那个售后服务好的安丘做网站的公司定做！

HTML文档结构：

树形结构：

childNodes和nodeName属性

childNodes属性：获取当前节点的子节点。

    
第一个child节点

    
第二个child节点

    
第三个child节点

空格和换行也属于一个节点，用text表示。

for(let i = 1;  i < boxChild.length; i += 2)
  console.log(boxChild[i]);

获取1、3、5……奇数节点。

nodeName属性：返回节点名称。

for(let i = 1;  i < boxChild.length; i += 2)
  console.log(boxChild[i].nodeName);

appendChild方法

appendChild(node)：在子节点最后一位插入新节点，node为新节点的名称。

let newnode = document.createElement("p");
newnode.innerHTML = "新节点";
box.appendChild(newnode);

console.log(boxChild);

removeChild方法

removeChild(node)：删除指定父级元素的某个子节点。

项目目标：点击删除按钮，依次删除列表中书籍。

btn.onclick = function(){
    list.removeChild(list.childNodes[1]);
}

parentNode属性

parentNode属性：返回指定节点的父节点。

    
第一个child节点

    
第二个child节点

    
第三个child节点

项目目标：点击叉号删除内容。

x.onclick = function(){
    document.body.removeChild(this.parentNode);
}

replaceChild方法

replaceChild(newnode,oldnode)方法：用新节点替换之前的节点。

    
第一个child节点

    
第二个child节点

    
第三个child节点

insertBefore方法

insertBefore可以在已有的子节点前插入一个新的子节点。项目目标：点击按钮，在ul标记子节点的第一位插入包含内容“我的世界”，文字颜色为红色的h4节点。

let btn = document.getElementById("button");
let game = document.getElementById("game");
btn.onclick = function() {
  let newGame = document.createElement("h4");
  newGame.innerHTML = "我的世界";
  newGame.style.color = "red";
  newGame.style.paddingLeft = "40px";
  game.insertBefore(newGame, game.firstChild);
}

setAttribute属性

setAttribute属性：添加指定的属性，并为其赋指定的值。

项目目标：点击“变”按钮，将输入框变为按钮。

let btn = document.getElementById("btn");
let input = document.getElementById("put");
btn.onclick = function() {
  input.setAttribute("type", "button");
}

网站题目：一文详解Javascript DOM树结构
链接URL：http://www.hantingmc.com/qtweb/news3/243953.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联