节点及其类型

  1. 元素节点
  2. 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
  3. 文本节点: 是元素节点的子节点, 其内容为文本.

在 html 文档的什么位置编写 js 代码

  • 直接在 html 页面中书写代码, js 和 html 强耦合, 不利用代码的维护

  • 一般地, 不能在 body 节点之前来直接获取 body 内的节点, 因为此时 html 文档树还没有加载完成,
  • 一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
  • 在整个 html 文档的最后编写类似代码,有利于页面的加载

window.onload = function(){};

获取元素节点

  1. document.getElementById: 根据 id 属性获取对应的单个节点
  2. document.getElementsByTagName:根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
  3. document.getElementsByName:
  • 根据节点的 name 属性获取符合条件的节点数组,但 ie 的实现方式和 W3C 标准有差别:

    • 在 html 文档中若某节点(li)没有 name 属性,则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

获取属性节点

  • 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
  • 通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue 来读写属性值

获取元素的子节点

  • childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 getElementsByTagName() 方法来获取.
  • firstChild 属性获取第一个子节点
  • lastChild 属性获取最后一个子节点

获取文本节点

  • 步骤: 元素节点 --> 获取元素节点的子节点
  • 若元素节点只有文本节点一个子节点, 可以先获取到指定的元素节点 eleNode, 然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

节点的属性

  • nodeName:代表当前节点的名字。只读属性,如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串

  • nodeType:返回一个整数, 这个数值代表着给定节点的类型,只读属性。1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点

  • nodeValue:返回给定节点的当前值(字符串). 可读写的属性

    • 元素节点, 返回值是 null.
    • 属性节点: 返回值是这个属性的值
    • 文本节点: 返回值是这个文本节点的内容

创建一个元素节点

​ 1). createElement(): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数:被创建的元素节点的名字, 是一个字符串.

​ 方法的返回值:是一个指向新建元素 节点的引用指针.

​ 新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.

创建一个文本节点

createTextNode()

  • 返回值是一个指向新建文本节点引用指针.
  • 方法只有一个参数:新建文本节点所包含的文本字符串.
  • 新元素节点不会自动添加到文档里

为元素节点添加子节点

  • appendChild(), 方法的返回值是一个指向新增子节点的引用指针.
  • 直接用innerHTML属性也行

节点的替换

  • replaceChild(newChild,oldChild):

    • 把一个给定父元素里的一个子节点替换为另外一个子节点
    • 返回值是一个指向已被替换的那个子节点的引用指针
  • 该节点除了替换功能以外还有移动的功能.

  • 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:

function replaceEach(aNode, bNode){
    if(aNode == bNode){
    return;
}
var aParentNode = aNode.parentNode;
//若 aNode 有父节点
if(aParentNode){
    var bParentNode = bNode.parentNode;
}
//若 bNode 有父节点
if(bParentNode){
    var tempNode = aNode.cloneNode(true);
    bParentNode.replaceChild(tempNode, bNode);
    aParentNode.replaceChild(bNode, aNode);
}

插入节点

  • insertBefore(newNode,targetNode):

    • 把一个给定节点插入到一个给定元素节点的给定子节点的前面
    • 节点 targetNode 必须是 element 元素的一个子节点
    • 该方法同时含有移动的功能。
  • 自定义 insertAfter() 方法(将 newChild 插入到 refChild 的后边 )

function insertAfter(newChild, refChild){
    var refParentNode = refChild.parentNode;
    //判断 refChild 是否存在父节点
    if(refParentNode){
        //判断 refChild 节点是否为其父节点的最后一个子节点
        if(refChild == refParentNode.lastChild){
            refParentNode.appendChild(newChild);
        }else{
            // 下一个兄弟节点
            refParentNode.insertBefore(newChild, refChild.nextSibling);
        }
    }
}

删除节点:

removeChild(node)

  • 从一个给定元素里删除一个子节点
  • 返回值是一个指向已被删除的子节点的引用指针. 节点被删除时, 这个节点所包含的所有子节点将同时被删除.
  • 如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。

DOM对象与JQuery对象互转

jQuery对象是一个DOM对象数组,可以使用数组下标的方式转为DOM对象

var btn = $("#btn-add")[0];

$(dom)将Dom转为jquery对象

JavsScript中DOM的基本操作的更多相关文章

  1. Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  2. webkit中DOM 事件有多少

    webkit中DOM 事件有多少 目前客户端javascript中大量的工作就是处理浏览器,用户触发的各种事件,下面是webkit中这些事件的集合,有一些时常见的,标准规定的,而另一些则是webkit ...

  3. js中DOM 节点的一些操作方法

    什么是DOM DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.目的其实就是为了能让js操作html元素而制定的一个规范. DOM就是由节点组成的. 解析过程 ...

  4. JAVAScript中DOM与BOM的差异分析

    JAVAScript 有三部分构成,ECMAScript,DOM和BOM,根据浏览器的不同,具体的表现形式也不尽相同.我们今天来谈一谈DOM和BOM这俩者之间的差异. 用百科上的来说: 1. DOM是 ...

  5. HTML中DOM核心知识有哪些(带实例超详解)

    HTML中DOM核心知识有哪些(带实例超详解) 一.总结: 1.先取html元素,然后再对他进行操作,取的话可以getElementById等 2.操作的话,可以是innerHtml,value等等 ...

  6. HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  7. Oracle中的一些基本操作

    关于Oracle中的一些基本操作,包括表空间操作,用户操作,表操作 --创建表空间 create tablespace itheima datafile 'I:\oracle\table\itheim ...

  8. MATLAB中图像的基本操作

    MATLAB中图像的基本操作 1.读取.显示图片 MATLAB中提供了immread()与imshow()函数读取和显示图片.其中读取函数imread()原型: imread: A = imread( ...

  9. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

随机推荐

  1. python 二分法查找思考理解小白向け

    首先说一下二分法查找的思路.这是面向小白的课程,大佬请让步谢谢 给定一个有序的序列(必须是排好序的)例如[1,2,3,4,5,6,7,8,9,10,20,30,400],然后我们查询一个元素出现的坐标 ...

  2. fork+exec 与system,popen区别

    1.fork + exec fork用来创建一个子进程.一个程序一调用fork函数,系统就为一个新的进程准备了前述三个段,首先,系统让新的进程与旧的进程使用同一个代码段,因为它们的程序还是相同的,对于 ...

  3. Python基础-列表、元祖

    1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 names = ['Alex',"Tenglan",'Eric ...

  4. NEUQOJ 1999: 三角形or四边形?【搜索联通块/模拟】

    http://newoj.acmclub.cn/problems/1999 1999: 三角形or四边形? 描述 题目描述: JiangYu很无聊,所以他拿钉子在板子上戳出了一个由.#组成的10*10 ...

  5. 51nod 1091 线段的重叠【贪心/区间覆盖类】

    1091 线段的重叠 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 X轴上有N条线段,每条线段包括1个起点和终点.线段的重叠是这样来算的,[10 2 ...

  6. TestList汇总

    [基本类型] 类的构造方法调用问题 重载复写的区别 Final finally finalized 的区别 定义final变量是否需要初始化 forward和redirect的区别 equals方法和 ...

  7. Bean的实例化--构造器

    1,编写Bean对象 package com.songyan.ico; public class Bean1 { } 2,配置xml <?xml version="1.0" ...

  8. WPF中的DesignMode判断

    WPF中提供你一个类似WinForm的DesignMode属性的方法来判断当前是否处于设计器模式: bool IsInDesignMode    {        get { return Desig ...

  9. 【SQL】用Sql Server自动生产html格式的数据字典

    原文:[SQL]用Sql Server自动生产html格式的数据字典 本文软件环境:Sql Server 2008. 1.打开sql server管理器,给选定的表添加描述信息,给指定的字段添加描述信 ...

  10. 教育 z

    奥巴马母亲留给儿子的遗产,不是谎言,而是让反对派不敢戮辨的——伟大的人格及优秀! 相比于奥巴马的母亲,中国式父母,更愿意走省心的路子.给孩子最催肥的食物,最昂贵的衣物,最庸懒的生活环境,不让孩子做任何 ...