zoukankan      html  css  js  c++  java
  • Javascript--HTML DOM基础知识

    1.HTML DOM是什么,以及它的作用:

      w3c对DOM有一系列的解释和定义,用自己理解的话来说就是:HTML DOM是html的标准对象模型,可以使JavaScript去操作(获取,修改,删除,添加,)HTML对象。

    2.DOM 如何获取HTML元素?

      在DOM中访问HTML元素的方法有多种 :

      1.DOM 节点:

        (在核心DOM中访问父子,兄弟节点)

        node.parentNode    访问父节点

        node.childNodes          访问所有子节点

        node.firstChild    访问第一个子节点

        node.lastChild    访问最后一个子节点

        node.nextSibling   访问下一个兄弟节点

        node.previousSibling 访问上一个兄弟节点

        (由核心DOM精简出的HTML DOM访问父子、兄弟节点)

        element.parentElement      访问父元素

        element.childern         访问所有子元素

        element.firstElementChild     访问第一个子元素

        element.lastElementChild     访问最后一个子元素

        element.nextElementChild       访问下一个子元素

        element.perviousElementChild    访问上一个子元素

      这两者之间的区别就在于 核心DOM无论访问的是父子节点还是兄弟节点 都会将空格,换行符当做节点 这就会造成使用的不便,而精简的HTML DOM 只会访问HTML中的元素。

      2.DOM 方法

        getElementById(id属性值)        返回带有id的元素

        getElementsByTagName(标签名)       返回指定标签名的所有元素 以数组的形式存储

        getElementsByClassName(class属性值)  返回是定类名的所有元素 以数组形式存储

        getElementsByName(name属性值)

      3.css选择器

        document.querySelectorAll(" ")  通过选择器获取元素  返回一个数组

        document.querySelector(" ")   通过选择器获取元素  返回一个元素

    3.DOM 如何修改HTML元素的内容、属性、样式

      1.修改其内容(element表示某个元素)

        对于双标签:element.innerHTML = “……”

              element.text/textcontent = " …… "

        这两者的差别在于 innerHTML 修改的是包含标签的文本内容 而text、textcontent修改的是纯文本内容

        对于单标签:element.value = " ……"

      2.修改其属性

        element.class = " " 修改class属性 

        element.href  =  " " 修改超链接href属性

        当赋值为空时相当于移除这个元素的属性

      3.修改其样式

        element.style.fontSize = "16px"  修改字体大小

        获取标签的样式:getcomputedstyle("标签名") 通过这种方式获取到的样式 只可以查看 不可以修改

    4.DOM 如何添加HTML元素

      1.追加

        element.appendChild(elem)   向父元素element追加一个子元素elem

      2.插入

        element.insertBefore(elem,oldElem)  向父元素的oldElem元素前插入一个elem元素

      3.替换

        element.replaceChild(elem,oldElem)  将父元素element的oldElem替换为elem元素 

      向DOM树添加新元素的方法有多种,使用方法视情况而定,这里举例一种最常用的方法:

    1.创建一个新的元素 var div = document.createElement("div")

    2.设置其内容:div.innerHTML = "  " (若是不需要添加内容可以省略)

    3.追加到父元素或者HTML中:parent.appendChild(div)

    需要注意的是 由于每向DOM中添加一次元素都会重新对每个元素进行计算和定位 非常耗时 所以尽量将需要添加的元素结构先在内存中构造好 再整体一次性添加到DOM树中

    5.DOM如何删除HTML元素

      parentNode.removeChild(elem)  删除父节点的elem子节点 

      

      

      

     

  • 相关阅读:
    后端指路手册(建议收藏):一文告诉你后端都要学习什么?应该从哪里学起!
    《Java 编程思想四》最新中文版,附下载地址!
    大厂面试必问的 4 大开源框架,你真的就懂了吗?
    借花献佛!朋友干了5年整的Java面试官,给我分享了一份面试官最爱问的Java面试题
    字节跳动总结的设计模式 PDF 火了,完整版开放下载!
    java
    java
    java
    java
    关于public class
  • 原文地址:https://www.cnblogs.com/blogzzy/p/11374060.html
Copyright © 2011-2022 走看看