• js学习--DOM操作详解大全 前奏(认识DOM)


    一 . 节点属性

    DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树:

    方法说明
    nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text。nodeName,是只读的。
    nodeType 节点的类型,返回值:1,元素节点;2,属性节点;3,文本节点。nodeType 是只读的。
    nodeValue 节点的值,返回一个字符串,指示这个节点的值。元素节点返回 null,属性节点返回属性值,文本节点返回文本。nodeValue 可读可写,这是对元素节点不能写。一般只用于设置文本节点的值。
    childNodes 返回子节点数组。文本和属性节点的 childNodes 永远是 null。可以用 hasChildNodes 来判断是否有子节点。只读属性。
    firstChild 返回第一个子节点。文本和属性节点没有子节点,会返回一个空数组。对于元素节点,若是没有子节点会返回 null。有一个等价式:firstChild = childNodes[0]。
    lastChild 返回最后一个子节点。返回值同 firstChild,,三方待遇参考上面。有一个等价式:lastChide = childNodes[childNodes.length - 1]。
    nextSibling 返回节点的下一个兄弟节点。如果没有下一个兄弟节点的话,返回 null。只读属性。
    previousSibling 返回节点的上一个兄弟节点。同上。
    parentNode 返回节点的父节点。document.parentNode 返回 null,其他的情况下都将返回一个元素节点,因为只有元素节点拥有子节点,出了 document 外任何节点都拥有父节点。只读属性。

    二. 节点方法

    还记得下面这些我们用过的方法么,他们都是 DOM 的方法:

    方法说明
    write() 写入内容到文档
    getElementById() 返回带有指定 ID 的元素
    getElementsByTagName() 返回带有指定标签名的所有元素
    getElementsByClassName() 返回包含指定类名的所有元素的一个列表
    get/setAttribute('key', 'value') 返回或设置属性节点。

    这些方法的前面要加上 document 对象的哦~

    还有一些其它的 DOM 操作控制的方法:

    方法说明
    createElement('tagName') 创建节点。
    createTextNode('text'); 创建文本节点。
    appendChild(o) 在父节点末尾附加子节点 ,其中 o 为节点对象。
    createDocumentFragment() 创建文档片断。
    removeChild(oP) 删除节点。
    replaceChild(newOp, targetOp) 替换节点。
    insertBefore(newOp, targetOp) 已有的子节点前插入一个新的子节点。
    insertAfter(newOp, targetOp) 已有的子节点之后插入一个新的子节点。
    get/setAttribute('key', 'value') 设置或得到属性节点。
    cloneNode(true/false) 复制节点。

    这些方法的使用主体不只是 document,更多的是各个节点元素。

    在文档对象模型(DOM)中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

    属性说明
    nodeName 节点名称,相当于 tagName 属性节点返回属性名,文本节点返回 #text。nodeName,是只读的。
    nodeType 节点的类型,返回值:1,元素节点;2,属性节点;3,文本节点。nodeType 是只读的。
    nodeValue 节点的值,返回一个字符串,指示这个节点的值。元素节点返回 null,属性节点返回属性值,文本节点返回文本。nodeValue 可读可写,这是对元素节点不能写。一般只用于设置文本节点的值。

    节点属性介绍:

    一、nodeName 属性:节点的名称,是只读的。

    1. 元素节点的 nodeName 与标签名相同

    2. 属性节点的 nodeName 是属性的名称

    3. 文本节点的 nodeName 永远是#text

    4. 文档节点的 nodeName 永远是#document

    二、nodeValue 属性:节点的值

    1. 元素节点的 nodeValue 是 undefined 或 null

    2. 文本节点的 nodeValue 是文本自身

    3. 属性节点的 nodeValue 是属性的值

    三、nodeType 属性:节点的类型,是只读的。以下常用的几种结点类型:

    元素类型节点类型
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

    我们有两种方法替换元素的内容,一个是 innerHTML,另一个是 innerText。

    innerHTML 属性用于获取或替换元素的内容,比如 <div> 标签内的所有元素。

    <div><a>文本内容</a></div>

    innerText 属性用于获取或替换元素的文本内容,只有文本内容,没有其它 HTML 标签。

    <div><a>文本内容</a></div>

    使用语法:

     
     
     
     
     
    1
    Object.innerHTML
    2
    3
    Object.innerText

    参数说明: Object 是获取的元素对象,如通过document.getElementById("ID")获取的元素。

    style 的使用语法:

    Object.style.property = new style;

    参数说明:

    1. Object 是获取的元素对象,如通过document.getElementById("id")获取的元素。

    2. property 为 css 样式属性,比如 color,width 等等,不做过多说明。

    className 属性可以设置或返回元素的 class 属性。

    使用语法:

     
     
    Object.className = classname;
     
     

    参数说明:

    1. Object 是获取的元素对象,如通过document.getElementById("id")获取的元素。

    2. className 为 元素的 class 属性。

  • 相关阅读:
    生日快乐 Happy Birthday To Me
    提取与设置函数值
    相当牛的老师
    C#核心概念装箱和拆箱(什么是装箱和拆箱)
    网易云音乐代理,解锁变灰歌曲
    ASP.NET 水晶报表在iis中无法显示的解决办法 Beacher
    android开发 服务端设备类型判断 Beacher
    asp.net之图片验证码生成 Beacher
    c# 委托之异步调用delegate Beacher
    log4net 日志组件使用方法 Beacher
  • 原文地址:https://www.cnblogs.com/jerry666/p/5634290.html
Copyright © 2020-2023  润新知