• home > webfront > SGML > xml >

    再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

    Author:zhoulujun Date:

    web前端开发,JS修改页面,首选就是的页面元素查找,节点遍历。DOM通过创建树来表示文档,描述了处理网页内容的方法和接口,从而使开发者对文档的内容和结构具有空前的控制力,用DOM API可以轻松地删除、添加和替换节点。

    操作节点,先得选择节点,就得知道节点选择器与DOM节点查找

    DOM节点选择器

    W3C提供了比较方便的定位节点的方法和属性

    getElementById()

    一个参数:元素标签的ID
    getElementsByTagName()一个参数:元素标签名
    getElementsByName()一个参数:name属性名
    getElementsByClassName()一个参数:包含一个或多个类名的字符串
    querySelector()接收CSS选择符,返回匹配到的第一个元素,没有则null
    querySelectorAll()接收CSS选择符,返回一个数组,没有则返回[]

    DOM节点关系与节点查找

    遍历节点树,所涉及发方法

    hasChildNodes()包含一个或多个节点时返回true
    contains()如果是后代节点返回true
    isEqualNode()两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回true
    isSameNode()指的是两个节点是否是同一类型,具有相等attributes/childNodes等
    compareDocumentPostion()确定节点之间的各种关系
    parentNode父节点
    parentElement父节点标签元素
    childNodes所有子节点
    children第一层子节点
    firstChild第一个子节点,Node 对象形式
    firstElementChild第一个子标签元素
    lastChild最后一个子节点
    lastElementChild最后一个子标签元素
    previousSibling上一个兄弟节点
    previousElementSibling上一个兄弟标签元素
    nextSibling下一个兄弟节点
    nextElementSibling下一个兄弟标签元素
    childElementCount第一层子元素的个数(不包括文本节点和注释)
    ownerDocument指向整个文档的文档节点

    node与element的区别

    • element是包含在node里的,它的nodeType是1

    • parentElement匹配的是parent为element的情况,而parentNode匹配的则是parent为node的情况。

    • 当父节点的nodeType不是1,即不是element节点的话,它的parentElement就会是null

    节点关系图如下

    DOM节点样式操作

    DOM节点样式操作,可以设置class,设置样式

    操作className

    className:返回节点样式,可以设置 className="demo1 class2"

    classList :返回所有类名的数组

    • add (添加)

    • contains (是否存在某个class,存在返回true,否则返回false)

    • remove(删除)

    • toggle(存在则删除,否则添加)

    操作style方法

    style.cssText可对style中的代码进行读写
    style.item()返回给定位置的CSS属性的名称
    style.lengthstyle代码块中参数个数
    style.getPropertyValue()返回给定属性的字符串值
    style.getPropertyPriority()检测给定属性是否设置了!important,设置了返回"important";否则返回空字符串
    style.removeProperty()删除指定属性
    style.setProperty()设置属性,可三个参数:设置属性名,设置属性值,是否设置为"important"(可不写或写"")


    DOM内容操作

    文本节点TEXT

    innerText所有的纯文本内容,包括子标签中的文本
    outerText与innerText类似
    innerHTML所有子节点(包括元素、注释和文本节点)
    outerHTML返回自身节点与所有子节点
    textContent与innerText类似,返回的内容带样式
    data文本内容
    length文本长度
    createTextNode()创建文本
    normalize()删除文本与文本之间的空白
    splitText()分割
    appendData()追加
    deleteData(offset,count)从offset指定的位置开始删除count个字符
    insertData(offset,text)在offset指定的位置插入text
    replaceData(offset,count,text)替换,从offset开始到offscount处的文本被text替换
    substringData(offset,count)提取从ffset开始到offscount处的文本


    innerText、innerHTML、outerHTML、outerText

    • innerText: 表示起始标签和结束标签之间的文本  

    • innerHTML: 表示元素的所有元素和文本的HTML代码  

    • outerText: 与前者的区别是替换的是整个目标节点,问题返回和innerText一样的内容  

    • outerHTML: 与前者的区别是替换的是整个目标节点,返回元素完整的HTML代码,包括元素本身


    文档节点 Document

    document.documentElement代表页面中的<html>元素
    document.body代表页面中的<body>元素
    document.doctype代表<!DOCTYPE>标签
    document.head代表页面中的<head>元素
    document.title代表<title>元素的文本,可修改
    document.URL当前页面的URL地址
    document.domain当前页面的域名
    document.charset当前页面使用的字符集
    document.defaultView返回当前 document对象所关联的 window 对象,没有返回 null
    document.anchors文档中所有带name属性的<a>元素
    document.links文档中所有带href属性的<a>元素
    document.forms文档中所有的<form>元素
    document.images文档中所有的<img>元素
    document.readyState两个值:loading(正在加载文档)、complete(已经加载完文档)
    document.compatMode

    两个值:BackCompat:标准兼容模式关闭、CSS1Compat:标准兼容模式开启

    write()、writeln()、

    open()、close()

    write()文本原样输出到屏幕、writeln()输出后加换行符、

    open()清空内容并打开新文档、close()关闭当前文档,下次写是新文档


    DOM基本操作思维导图

    dom基本操作思维导图


    参考文章:

    ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)https://www.cnblogs.com/best/p/8028168.html

    JavaScript学习总结(三)BOM和DOM详解 https://segmentfault.com/a/1190000000654274

    Javascript操作BOM和DOM详解(1) https://blog.csdn.net/openbox2008/article/details/85260063

    JavaWeb学习总结:JavaScript(BOM和DOM) https://blog.csdn.net/weixin_42384085/article/details/99807198

    HTML DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp

    XML DOM - Element 对象 https://www.w3school.com.cn/xmldom/dom_element.asp

    JAVAScript中DOM与BOM的差异分析 https://www.cnblogs.com/fjner/p/5892325.html



    转载本站文章《再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8345.html