Javascript中节点查询和使用

# day10

## 查询节点

### 1.如果需要操作HTML元素/节点,必须找到该元素

### 2.查询节点的方式

2.1 通过id查询

2.2 通过层次查询(节点的结构关系)

parentNode（找到节点的父亲元素）

2.3 通过标签名查询

2.4 通过name查询

• 北京
• 上海
• 广州
• 深圳
• 佳木斯
• 廊坊
• 雄安

男

女

## 创建新节点

### var obj=document.createElement("TagName");

### 1.创建一个新节点对象

### 2.把这个新对象挂到Dom树上

### 课堂小练习,添加li标签

value="追加" οnclick="fn1();">

• 北京
• 上海
• 广州
• 深圳
• 佳木斯
• 廊坊
• 雄安

function fn1(){

//创建新节点

var oLi=document.createElement("li");

//设置节点内容

oLi.innerHTML="贵州";

//挂在dom树上

var oUl=document

.getElementsByTagName("ul")[0];

oUl.appendChild(oLi);

}

### 插入新标签,需要知道父亲和弟弟对象

value="追加" οnclick="fn1();">

value="插入" οnclick="fn2();">

• 北京
• 上海
• 广州
• 深圳
• 佳木斯
• 廊坊
• 雄安

## 删除节点

value="删除" οnclick="fn3();">

function fn3(){

//父级对象,被删除节点本身

var oUl=document

.getElementsByTagName("ul")[0];

var oLi_gz=document.getElementById("gz");

//通过父级把孩子删除

oUl.removeChild(oLi_gz);

}

### 小总结:

### 增加或者删除节点,都必须使用父节点对象调用方法

### gz想删除自己,步骤是什么,一句话总结

### 先找到gz的对象,通过此对象找到父级ul

### ul.removeChild(gz)

### 找他爹删他

### 综合总结:

### 1.读写节点内容/节点类型/节点名称/节点属性

obj.nodeName/obj.NodeType

obj.innerHTML/obj.innerText

obj.value

obj.setAttribute()/obj.getAttribute()

obj.className/ obj.id /obj.style.color

### 2.查询节点

document.getElementById()

document.getElementsByTagName()//返回值是数组

document.getElementsByTagName("tagname")[index]

//通过父级对象调用此方法,得到范围更精准

obj.getElementsByTagName("tagname")[index]

obj.parentNode/obj.childNodes

//专门通过name属性找到对象

document.getElementsByName();

### 3.增删节点,父节点在调用方法,增删子节点

### 增加节点,先创建新节点,挂到dom树上

document.createElement("tagname")

obj_parent.appendChild(newnode);

obj_parent.insertBefore(newnode,弟弟);