Javascript中节点查询和使用

最新推荐文章于 2023-06-18 13:40:42 发布

秃头少女️

最新推荐文章于 2023-06-18 13:40:42 发布

阅读量309

点赞数

分类专栏： Javascript 文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_49449261/article/details/129012242

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

# day10

## 查询节点

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

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

2.1 通过id查询

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

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

2.3 通过标签名查询

2.4 通过name查询

<body>

<ul>

</ul>

<p>

<input type="radio" name="gender">男

<input type="radio" name="gender">女

</p>

</body>

window.οnlοad=function(){

//1 通过id查询

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

//console.log(oLi_gz);

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

//2.1 查询某个已知节点的父亲

//console.log(oLi_gz.parentNode);

//var oUl=oLi_gz.parentNode;

//3 通过标签名查询

var oUl=document

.getElementsByTagName("ul")[0];

//console.log(oUl);

//2.2 查询某个已知节点的孩子

//这种直接使用childNodes,不方便

//console.log(oUl.childNodes);

//这种获得父级元素对象内部元素的方式很重要

var oLis=oUl.getElementsByTagName("li");

//console.log(oLis);

//通过id得到广州的li对象.

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

//通过此对象,如何得到所有li节点对象

var oLis=oLi_gz.parentNode

.getElementsByTagName("li");

console.log(oLis);

//4 通过name查询

var oInputs=document

.getElementsByName("gender");

console.log(oInputs);

}

</script>

## 创建新节点

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

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

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

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

<body>

<p>

<input type="button"

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

</p>

<ul>

</ul>

</body>

function fn1(){

//创建新节点

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

//设置节点内容

oLi.innerHTML="贵州";

//挂在dom树上

var oUl=document

.getElementsByTagName("ul")[0];

oUl.appendChild(oLi);

}

</script>

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

<body>

<p>

<input type="button"

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

<input type="button"

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

</p>

<ul>

</ul>

</body>

function fn1(){

//创建新节点

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

//设置节点内容

oLi.innerHTML="贵州";

//挂在dom树上

var oUl=document

.getElementsByTagName("ul")[0];

oUl.appendChild(oLi);

}

function fn2(){

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

oLi.innerHTML="杭州";

//获得父级对象和弟弟对象

var oUl=document

.getElementsByTagName("ul")[0];

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

//把新节点插入到弟弟之前

//父亲.insertBefore(新标签,弟弟);

oUl.insertBefore(oLi,oLi_gz);

}

</script>

## 删除节点

<input type="button"

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,弟弟);

秃头少女️

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript中节点查询和使用

节点的使用
复制链接

扫一扫

专栏目录

Javascript中节点查询和使用

“相关推荐”对你有帮助么？