浅谈DOM

作者: baiying | 来源:发表于2017-04-05 23:33 被阅读62次

    由于昨天面试问到的关于Dom的一些操作,自己并不能够灵活的运用,就打算总结一下常用的关于Dom的操作。

    什么是DOM?,

    官方释义:Document Object Model,即就是文档对象模型,更通俗的说就是文档内容的结构关系.w3c解释它为:中立于平台和语言的接口

    DOM的组成

    • 核心 DOM - 针对任何结构化文档的标准模型
    • XML DOM - 针对 XML 文档的标准模型
    • HTML DOM - 针对 HTML 文档的标准模型

    DOM可以做什么?

    DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式

    重点聊聊HTMLDOM

    HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
    深入理解HTML DOM:HTML 文档中的所有内容都是节点

    HTML DOM DOM节点关系
    DOM中常用的方法:
    • getElementById():返回指定ID的元素
    • getElementByClassName():返回指定类名的元素列表
    • getElementByTagName():返回指定标签名称的所有元素列表
    • appendChild():将新的子节点添加到指定节点
    • removeChild():删除指定节点
    • createElement():创建元素节点
    • createAttribute():创建属性节点
    • createTextNode:创建文本节点
    • getAttribute():返回指定属性值
    • setAttribute():把指定属性设置或修改为指定的值。
      来个小栗子:
    //html核心代码
    <body>
    <div id = "ele">hello </div>
    <div class = "dom"></div>
    <div class = "dom"></div>
    </body>
    //js代码
    var text1 = document.createTextNode( "dom");
    var ele = document.getElementById('ele');
    ele.appendChild(text1);  //页面显示出dom
    
    var text2 = document.createTextNode( "hi ");
    var text3 = document.createTextNode( "javascript ");
    var eles = document.getElementsByClassName('dom');
    eles[0].appendChild(text2);   //页面显示出hi
    eles[1].appendChild(text3);  //页面显示出javascript
    
    eles[0].removeChild(text2);   //移除text2,页面上没有了hi
    eles[1].replaceChild(text2,text3);   //用text2替换了text3,javascript变为hi
    ele.insertBefore(text3,text1);  //在text1之前插入text3,页面上dom之前显示出了javascript
    
    var newEle = document.createElement("button");
    var content = document.createTextNode("click");
    newEle.appendChild(content); 
    ele.appendChild(newEle); //id为ele的div节点中添加了一个button节点
    
    运行结果
    DOM中常见的属性
    • innerHTML:设置或修改html元素的内容
    //html代码
    <body>
    <div></div>
    </body>
    //js代码
    var lis = document.getElementsByTagName("DIV");
    lis[0].innerHTML = "hello"; //页面显示hello
    
    • nodeName:节点的名称
    • nodeName是只读的
    • 元素节点的 nodeName 与标签名相同
    • 属性节点的 nodeName 与属性名相同
    • 文本节点的 nodeName 始终是 #text
    • 文档节点的 nodeName 始终是 #document
    • nodeName 始终包含 HTML 元素的大写字母标签名。
    //html代码
    <body>
      <div ></div>
    </body>
    //js代码
    var lis = document.getElementsByTagName("DIV");
    lis[0].innerHTML = "hello";
    console.log(lis[0].nodeName); //输出"DIV"
    var textNode = document.createTextNode("world");
    console.log(textNode.nodeName);//输出"#text"
    console.log(document.nodeName);//输出"#document"
    
    • nodeValue:规定节点的值
    • 元素节点的 nodeValue 是 undefined 或 null
    • 文本节点的 nodeValue 是文本本身
    • 属性节点的 nodeValue 是属性值
    //html
    <body>
      <div ></div>
    </body>
    //js
    var lis = document.getElementsByTagName("DIV");
    lis[0].innerHTML = "hello";
    var textNode = document.createTextNode("world");
    console.log(textNode.nodeValue);//输出"world"
    console.log(lis[0].nodeValue);//输出null
    
    • nodeType 属性:返回节点的类型,只读
      常见的节点类型:
    • 元素:1
    • 属性:2
    • 文本:3
    • 注释:8
    • 文档:9
    //html
    <body>
      <div ></div>
    </body>
    //js代码
    var lis = document.getElementsByTagName("DIV");
    lis[0].innerHTML = "hello";
    var textNode = document.createTextNode("world");
    console.log(textNode.nodeType); //输出3
    console.log(lis[0].nodeType);//输出1
    
    • childNodes:返回当前元素所有子元素的数组
    //html代码
    <body>
     <div id = "ele">
       <p>fdg</p>
       <button>fd</button>
     </div>
    </body>
    //js代码
    var ele = document.getElementById("ele");
    var childs = ele.childNodes;
    console.log(childs.length);  //5
    ele.removeChild(ele.childNodes[0]);
    console.log(childs.length);  //4
    
    • parentNode:返回当前元素的父元素
    //html代码
    <body>
     <div id = "ele">
      <p id = "ele1">fdg</p>
      <button>fd</button>
     </div>
    </body>
    //js代码
    var ele1 = document.getElementById("ele1");
    console.log(ele1.parentNode.nodeName); //"DIV"
    

    相关文章

      网友评论

        本文标题:浅谈DOM

        本文链接:https://www.haomeiwen.com/subject/wkwiottx.html