精华内容
下载资源
问答
  • DOM节点

    2018-01-27 21:04:30
    一、DOM节点简介: 1.在HTML DOM中,所有事物都是节点。DOM是被视为节点树的HTML。 2.根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点:  整个文档是一个文档节点。  每个HTML元素是元素节点。  ...
    

    HTML DOM节点:

    DOM节点简介:

    1.HTML DOM中,所有事物都是节点。DOM是被视为节点树的HTML

    2.根据W3CHTML DOM标准,HTML文档中的所有内容都是节点:

         <1>整个文档是一个文档节点。

         <2>每个HTML元素是元素节点。

         <3>HTML元素内的文本是文本节点。

         <4>每个HTML属性是属性节点。

         <5>注释是注释节点。

    3.通过HTML DOM,节点树中的所有节点均可通过javascript进行访问。所有HTML元素(节点)均可被创建或删除节点。

    [警告]DOM处理中的常见错误是希望元素节点包含文本。例如:<title>DOM教程</title>

    元素节点<title>,包含值为“DOM教程”的文本节点。可通过节点的innerHTML属性

    来访问文本节点的值。

    举例

         <html>

             <head>

               <title>DOM教程</title>

             </head>

             <body>

               <h1>DOM第一课</h1>

               <p>Hello World!</p>

             </body>

         </html>

    在上面的HTML中:

          <1><html>节点没有父节点;它是根节点

          <2><head><body>的父节点是<html>节点

          <3>文本节点“Hello World!的父节点是<p>节点

          <4><html>节点拥有两个子节点:<head><body>

          <5><head>拥有一个子节点:<title>节点

          <6><title>节点也拥有一个子节点:文本节点“DOM教程”

          <7><h1><p>节点是同胞节点,同时也是<body>的子节点

    1. 有关DOM节点的案例

             1.创建新的HTML元素(即节点):

       提示: 如果需要向HTML DOM添加新元素,你必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。

       举例:

       <html>

      <head>

      <meta charset="utf-8">

      <title>创建新节点</title>

      </head>

      <body>

      <div id="div1">

      <p id="p1">这是一个段落。</p>

      <p id="p2">这是另一个段落。</p>

      </div>

      <script>

      var para=document.createElement("p");//创建新的<p>元素

      var node=document.createTextNode("这是新段落。")//创建文本节点

      para.appendChild(node);//<p>元素追加这个文本节点

      var element=document.getElementById("div1");//找到一个已有的元素

      element.appendChild(para);//向这个已有的元素追加新元素

      </script>

      </body>

      </html>

    1. 删除已有的HTML元素:

       提示:如需删除HTML元素,你必须首先获得该元素的父元素。如果能够在不引用父元素的情况下删除某个元素,就太好的。不过很遗憾。DOM需要清楚你需要删除的元素,以及它的父元素。

              这是常用的解决方案:找到你希望删除的子元素,然后使用其parentNode属性来找到父元素 :

              var child =document.getElementById(p1);

              child.parentNode.removeChild(child);//找到它的父元素然后通过父元素来删除这个子元素。+

       举例:

       <html>

       <head>

       <meta charset="utf-8">

       <title>删除节点</title>

       </head>

       <body>

       <div id="div1">

       <p id="p1">这是一个段落。</p>

       <p id="p2">这是另一个段落。</p>

       </div>

       <script>

       var parent=document.getElementById("div1");//找到id="div1"的元素

       var child=document.getElementById("p1");//找到id="p1"<p>元素

       parent.removeChild(child);//从父元素中删除子元素

       </script>

       </body>

       </html>

    展开全文
  • Dom节点

    2019-08-25 16:17:48
    在HTML DOM中HTML文档中所有内容都被视为节点DOM被视为节点树的HTML。 节点分为父节点子节点和同胞,一个文档中可以有多个父节点和子节点 <html> <head> <title>DOM 结构</title> </...

    Dom是Document Object Model(文档对象模型)的缩写
    在HTML DOM中HTML文档中所有内容都被视为节点,DOM被视为节点树的HTML。
    节点分为父节点子节点和同胞,一个文档中可以有多个父节点和子节点

    <html>
    <head>
    <title>DOM 结构</title>
    </head?
    <body>
    <h1>DOM 结构</h1>
    <p>Hello world!</p>
    </body>
    </html>
    

    从上面代码可以看出<html></html>有二个子节点分别是<head>和<body>

     <html>为根节点,它没有父节点,它有两个子元素节点<head>、<body>
    <head>有一个子元素节点<title>,<body>有两个子元素节点<h1>、<p>
    <title>有一个子文本节点:“DOM结构”,类似<h1>和<p>也有一个子文本节点
    <h1>和<p>为同胞节点
    
    展开全文
  • 一、dom节点树 遍历文档节点树 遍历元素节点树 二、dom节点关系 节点属性 父级属性 子级属性 同级属性 节点方法 一、dom节点树 根据w3c的dom标准,文档中的所有内容都是节点,节点是dom的最小组成单元。...

    目录

    一、dom节点树

    遍历文档节点树

    遍历元素节点树

    二、dom节点关系

    节点属性

    父级属性

    子级属性

    同级属性

    节点方法


    一、dom节点树

    根据w3c的dom标准,文档中的所有内容都是节点,节点是dom的最小组成单元。浏览器会根据dom模型将文档解析成一系列节点,这些节点组成一个树状结构,称为dom节点树。dom节点树体现了文档的层次结构。dom节点树有两种类型,其一dom文档节点树,其二dom元素节点树,dom文档节点树包含文档中所有类型的节点,dom元素节点树只包含元素节点。

    遍历文档节点树

    遍历所有Node节点。遍历dom文档节点树的方法兼容于所有浏览器。

    1、parentNode
    2、childNodes
    3、firstChild
    4、lastChild
    5、nextSibling
    6、previousSibling
    //兼容写法获取前一个元素节点
    function previousElem(elem){
        var ret = elem && elem.previousSibling;
        if(ret && ret.nodeType != 1){
            ret = previousElem(ret);
        }
        return ret;
    }

    遍历元素节点树

    遍历元素节点,其余类型的节点忽略。除了children方法外其余方法在ie8及以下版本的浏览器中都不兼容。

    1、parentElement
    2、children
    3、childElementCount
    4、firstElementChild
    5、lastElementChild
    6、nextElementSibling
    7、previousElementSibling

    二、dom节点关系

    dom将文档解析成一个由多层次节点构成的结构即dom结构。节点是dom结构的基础。dom节点包含12种类型,每种类型的节点分别表示文档中不同的信息及标记。节点之间的关系构成了层次,整个文档表现为一个以特定节点为根节点的树形结构。节点关系类似于传统的家族关系,节点树相当于家谱。

    节点属性

    dom节点的关系属性都是只读的。

    父级属性

    parentNode

    每个节点都有一个parentNode属性,该属性指向当前节点在节点树中的父节点。对于一个节点来说,它的父节点只可能为三种类型,分别是元素节点、文档节点和文档片段节点。如果父节点不存在,则返回null。

    parentElement

    与parentNode属性不同的,该属性指向当前节点在节点树中的父元素节点。ie浏览器中只有元素节点有该属性,其它浏览器中所有类型的节点都有该属性。

    <div>
        <strong></strong>
        <span></span>
    </div>
    <script>
        var strong = document.getElementsByTagName("strong")[0]; 
        console.log(strong.parentElement);    
    </script>

    子级属性

    childNodes

    childNodes返回一个只读的NodeList集合,保存着当前节点的第一层子节点。

    <div>
        123
        <--注释-->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]; 
        console.log(div.childNodes);    
        //NodeList(7) [text, comment, text, strong, text, span, text]
        //返回7个子节点,text表示文本节点,comment是注释节点
    </script>

    children

    children返回一个只读的HTMLCollection集合,保存着当前节点的第一层子元素节点。

    <div>
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]; 
        console.log(div.children); //HTMLCollection(2) [strong, span]    
    </script>

    childElementCount

    返回当前节点下子元素节点的个数,相当于children.length。ie8及以下版本的浏览器中不兼容。

    <div>
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]; 
        console.log(div.childElementCount); //2 
    </script>

    firstChild

    当前节点的第一个子节点。ie8及以下版本浏览器忽略空白文本节点。

    lastChild

    当前节点的最后一个子节点。ie8及以下版本浏览器忽略空白文本节点。

    <div>
        123
        <!--注释-->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("div")[0]; 
        console.log(div.firstChild); //"    123    " --> 文本节点
        console.log(div.lastChild);  //#text --> 空文本节点
    </script>

    firstElementChild

    当前节点的第一个元素节点。ie8及以下版本浏览器不兼容。

    lastElementChild

    当前节点的最后一个元素节点。ie8及以下版本浏览器不兼容。

    同级属性

    nextSibling

    当前节点的后一个兄弟节点。ie8及以下版本浏览器忽略空白文本节点。

    previousSibling

    当前节点的前一个兄弟节点。ie8及以下版本浏览器忽略空白文本节点。

    <div>
        123
        <!--注释-->
        <strong></strong>
        <span></span>
    </div>
    <script>
        var div = document.getElementsByTagName("strong")[0]; 
        console.log(div.nextSibling);      //#text
        console.log(div.previousSibling);  //#text 
    </script>

    nextElementSibling

    当前节点的后一个兄弟元素节点。ie8及以下版本浏览器不兼容。

    previousElementSibling

    当前节点的前一个兄弟元素节点。ie8及以下版本浏览器不兼容。

    节点方法

    hasChildNodes()

    判断当前节点是否包含子节点,包含一个或多个子节点时返回true。子节点可以是任意类型。

    contains()

    contains方法接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。参数为后代节点即返回true,不一定是第一层子节点。ie和safari不支持document.contains()方法,只支持元素节点的contains()方法。

    <div id="d1">
        <span id="s1"></span>
        <span id="s2"></span>
    </div>
    <script>
        console.log(d1.contains(s1)); //true
        console.log(s1.contains(s2)); //false
    </script>

     

    展开全文
  • dom节点

    2015-09-24 09:29:37
    文档节点 元素节点 属性节点 内容节点 注释节点

    文档(dom)节点

    元素(Element)节点

    属性(Attribute)节点

    内容(InnerHtml)节点

    注释节点

     

    展开全文
  • 2.使用this.refs[′name′]或this.refs['name'] 或 this.refs[′name′]或this.refs.name,即可获取dom节点 this.$refs['div'] 3.获取dom的位置 getBoundingClientRect()可以打印出dom 的位置宽高等信息 this.$refs['...
  • 刚刚开通了自己个人的微博和博客,由于没有过类似的经历,所以有些不知所措。...记得刚开始解除jQuery选择器的时候,看到前辈代码里这三个类似的东西:$('Dom节点1','Dom节点2') 和 $('Dom节点1...
  • HTML DOM 节点

    2020-03-29 12:45:14
    文章目录HTML DOM 节点DOM NodesDOM 节点HTML DOM 节点节点父、子和同胞警告! 在 HTML DOM 中,所有事物都是节点DOM 是被视为节点树的 HTML。 DOM Nodes DOM 节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的...
  • 1. 操作 DOM 节点 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...JavaScript操作DOM节点</title> <script type="text/javascript"> function modifyDOM(){...
  • HTML DOM节点介绍,在HTML DOM中,所有事物都是节点。DOM是被视为节点树的HTML。 DOM节点 根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点: 整个文档是一个文档节点 每个HTML元素是元素节点 HTML元素内的...
  • 小程序更改dom节点的值Change the value of the innerText property: 更改innerText属性的值: element.innerText = 'x'To lookup the element, combine it with the Selectors API: 要查找元素,请将其与...
  • HTML DOM节点

    2019-10-16 09:50:06
    DOM节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM 节点树...
  • vue获取到dom节点 Vue-stickto (vue-stickto) A vue directive that support multiple DOM Node stick to top automatically. 支持多个DOM节点的vue指令会自动粘贴到顶部。 View demo 查看演示 Download Source ...
  • DOM 节点操作

    2020-05-10 21:40:52
    DOM节点分为三大类:元素节点(标签节点),属性节点和文本节点。 属性节点和文本节点都属于节点的子节点。因此操作时,需先选中元素节点,再修改属性和文本。 注意事项: 1, ID不能重名,如果ID重复,只能取到第一...
  • JavaScript 技术篇-textContent获取dom节点text文本内容带空格,js获取带空格的dom节点内容。 我们用 innerText 获取到的文本信息是除掉空格的。但有时根据需求我们需要获取到完整的文本信息。 用 textContent 就...
  • DOM把HTML和XML文档视为一种树结构,这种结构称为节点树(DOM Tree),浏览器载入文档后,文档中的标签被解析成一系列的节点,**节点是DOM的最小组成单位**。...DOM节点的属性:节点对象.nodeType;元素节点返...
  • DOM节点属性

    2019-04-15 09:51:57
    在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : nodeName : 节点的名称 nodeValue :节点的值 nodeType :节点的类型 一、nodeName 属性: 节点的名称,是只读的。...
  • HTML DOM节点和属性

    2019-12-28 15:44:39
    HTML DOMHTML DOM 简介HTML DOM 节点DOM 节点DOM Nodes)HTML DOM 节点节点父、子和同胞节点间关系HTML DOM 属性编程接口innerHTML 属性nodeName 属性nodeValue 属性nodeType 属性查找 HTML DOM 简介 DOM ...
  • angular获取dom节点

    2020-11-26 16:09:35
    angular获取dom节点 .html文件中 <div #myBox> dom节点 </div> 在.ts文件中 引入 ViewChild import { ViewChild } from '@angular/core'; export class NewsComponent implements OnInit { //写在类...
  • JavaScript-dom节点操作

    2020-07-09 10:54:36
    dom节点操作js 操作dom节点什么是dom过程DOM数--所有的东西都是节点节点的类型---nodeType节点的查找节点的创建节点关系子节点关系父节点关系兄弟节点关系节点的操作增删改复制插入获取节点rect js 操作dom节点 什么...
  • DOM节点【DOM】

    2017-08-20 19:19:33
    DOM节点类型共有12种: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实
  • DOM 节点方法

    2017-06-11 15:53:27
    DOM节点方法 1.createElement() 创建元素节点 2.creatTextNode() 创建文本节点 3.添加(插入)节点 (1) 元素.appendChild(文本) 将文本加到元素节点 将元素节点添加到父节点 (2)元素.pa

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,885
精华内容 12,354
关键字:

dom节点