原生JavaScript Dom方法

╰半夏微凉° 2022-06-18 07:08 227阅读 0赞

在原生JS中，所有的节点都是Node类型。

## 获取节点 ##

document.querySelector  
document.querySelectorAll

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

这里写代码片

## 获取子节点 ##

var firstChild = someNode.childNodes[0];
    var secondChild = someNode.childNodes.item(1);
    var count = someNode.childNodes.length;

获取第一个／最后一个子节点：

someNode.firstChild
    someNode.lastChild

## 获取父节点 ##

var parent = someNode.parentNode;

## 获取同胞节点 ##

if (someNode.nextSibling === null){
        alert("Last node in the parent’s childNodes list.");
    } else if (someNode.previousSibling === null){
        alert("First node in the parent’s childNodes list.");
    }

## 操作子节点： ##

方法一：appendChild

var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode); //true 
    alert(someNode.lastChild == newNode); //true

方法二：insertBefore

//插入后成为最后一个子节点
    returnedNode = someNode.insertBefore(newNode, null); 
    alert(newNode == someNode.lastChild); //true
    
    //插入后成为第一个子节点
    var returnedNode = someNode.insertBefore(newNode, someNode.firstChild); 
    alert(returnedNode == newNode); //true
    alert(newNode == someNode.firstChild); //true
    
    //插入到最后一个子节点前面
    returnedNode = someNode.insertBefore(newNode, someNode.lastChild); 
    alert(newNode == someNode.childNodes[someNode.childNodes.length-2]); //true

方法三：replaceChild，替换子节点

//替换第一个子节点
    var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);
    //替换最后一个子节点
    returnedNode = someNode.replaceChild(newNode, someNode.lastChild);

方法四：removeChild，删除子节点

## 可操作所有节点 ##

cloneNode()：参数true表示进行深复制，否则进行浅复制。

## document 方法 ##

1、getElementById()  
2、getElementsByTagName()

<img src="myimage.gif" name="myImage">
    
    var images = document.getElementsByTagName("img");
    var myImage = images.namedItem("myImage");
    var myImage = images["myImage"];// 或者

3、getElementsByName()  
4、getElementsByClassName() （HTML5 添加）  
5、document.createElement()创建元素

var div = document.createElement("div");

## 操作元素属性 ##

// get方法
    var div = document.getElementById("myDiv");
    alert(div.getAttribute("id"));
    alert(div.getAttribute("class"));
    alert(div.getAttribute("title"));
    alert(div.getAttribute("lang"));
    alert(div.getAttribute("dir"));
    
    // set方法
    div.setAttribute("id", "someOtherId");
    div.setAttribute("class", "ft");
    div.setAttribute("title", "Some other text");
    div.setAttribute("lang","fr");
    div.setAttribute("dir", "rtl");

或者部分可以：

alert(div.id);
    alert(div.class);
    
    div.id = "someOtherId";
    div.align = "left";

removeAttribute()方法：不仅会清除特性的值，而且也会从元素中完全删除特性

div.removeAttribute("class");

获取元素类classList：

div.classList.remove("user");// 删除类
    div.classList.add("current");// 添加类
    div.classList.toggle("user");// 切换类
    div.classList.contains("bd");// 是否包含类

## 访问元素的样式 ##

var myDiv = document.getElementById("myDiv");
    //设置背景颜色 
    myDiv.style.backgroundColor = "red";
    //改变大小
    myDiv.style.width = "100px"; 
    myDiv.style.height = "200px";
    //指定边框
    myDiv.style.border = "1px solid black";

也可以使用如下方法，但是要注意，赋给 cssText 的值会重写整个 style 特性的值；也就是说，以前通过 style 特性指定的样式信息都将丢失。

myDiv.style.cssText = "width: 25px; height: 100px; background-color: green"; 
    alert(myDiv.style.cssText);