JavsScript中DOM的基本操作

Posted 2021-11-23 mabaoqing

节点及其类型

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对象