文章目录
  1. 1. 节点
    1. 1.1. Js的css选择器
    2. 1.2. 一些概念和代码
  2. 2. 节点的增删改查
    1. 2.1. 创建
    2. 2.2. 插入
    3. 2.3. 删除和替换

节点

Js的css选择器

1
2
3
4
5
 document.querySelector(selectors);  //和css选择完全一样
document.querySelectorAll(); //返回Nodelist
console.log(document.querySelector('[
"]'));//栗子
<!-- 要加东西!!!! -->

一些概念和代码

nodeType :可用于遍历网页

获取节点属性:

1
document.body.attributes["onload"]; //<body>的onload属性值

获取特定节点的html代码:

1
2
document.getElementById('').innerHTML;  //以字符串形式展示  
.outerHTML; //outerHTML包含选中节点的html内容

CDATASection

demo:查找某个节点的所有text节点

1
2
3
4
5
6
7
8
9
10
11
var textContent = new function(e){
var child,type,s = "";
for(child = e.firstChild; child != null; child = child.nextSibling){
type = child.nodeType;
if(type === 3 || type === 4) //Text和CDATASection
s += child.nodeValue;
else if (type === 1)
s += textContent(child); //如果该节点是子节点(元素),节点递归
}
return s;
}

节点的增删改查

创建

1
2
3
4
5
6
var loadaync = new function(url){   //head头中插入一条外链js
var head = document.getElementsByTagName("head")[0];
var s = document.creatElement("script");
s.src = url;
head.appendChild(s);
}

Text节点可以用如下方式创建:

1
var newnode = document.createTextNode("New words");

插入

1
2
3
4
5
6
7
8
var insertAt = new function(parent, child, n){
if (n < 0 || n >parent.childNodes.length)
throw new Error("Invalid index!"); //对n的位置进行报错处理
else if (n == parent.childNodes.length)
parent.appendChild(child);
else
parent.insertBefore(child, parent.childNodes[n]);
}

删除和替换

1
2
//删除
n.parentNode.removeChild( n ); //在父节点运行函数
1
2
//替换n节点
n.parentNode.replaceChild( document.creatTextNode("[ Redacted ]"),n); //在父节点运行函数
文章目录
  1. 1. 节点
    1. 1.1. Js的css选择器
    2. 1.2. 一些概念和代码
  2. 2. 节点的增删改查
    1. 2.1. 创建
    2. 2.2. 插入
    3. 2.3. 删除和替换