JS中DOM及增删改查

news/2024/12/22 16:20:46/

1.使用DOM获取元素

1.getElementById(id) 通过元素id名获取元素

例:获取id名为box的元素
document.getElementById(“box”);

2.getElementsByTagName 通过标签名获取元素列表(数组)

例:获取所有的li标签
document.getElementsByTagName(‘li’);
获取所有的标签
document.getElementsByTagName(“*”);
ie9以下会多出节点 会被当成是一个节点

3.getElementsByName 通过元素name属性值获取元素列表(数组)

name属性常被定义在哪些元素中:
form,input,select,textarea,a,button,img…
例:获取name属性值

var name1=document.getElementsByName(“haha”);
获取input value值:name1.value
单选/复选框是否被选中:ipt.checked 对象名.属性名 获取当前对象是否被选中

2.DOM中节点对象的常用属性和方法

1 获取标签名

节点对象.tagName

2 获取或设置元素的内容

节点对象.innerHTML

2.1、innerHTML:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

2.2、innerText:

从起始位置到终止位置的内容, 但它去除Html标签

3 获取或设置元素的value值

节点对象.value

4 获取所有子节点——数组结构,包含空节点

节点对象.childNodes 或者 节点对象.children

4.1、childNodes:获取节点,不同浏览器表现不同;

IE:只获取元素节点;
非IE:获取元素节点与文本节点;
解决方案:if(childNode.nodeName==”#text”) continue 或者 if(childNode.nodeType != ‘3’) continue

4.2、children:获取元素节点,浏览器表现相同。

因此建议使用children

5 获取节点的节点名

节点对象.nodeName

6 获取节点的父节点

节点对象.parentNode

7 删除子节点

父节点对象.removeChild(子节点);

8 元素显示和隐藏有两种方式:

8.1 占位隐藏

元素对象.style.visibility
隐藏:hidden
显示:visible

8.2 不占位隐藏

元素对象.style.display
隐藏:none
显示:block

3.使用DOM对元素进行增删改查操作3.使用DOM对元素进行增删改查操作

一、【节点的查询】

1.所有子节点集合

节点对象.childNodes;

2.第一个子节点

节点对象.firstChild;
节点对象.childNodes[0]

3.最后一个子节点

节点对象.lastChild;
节点对象.childNodes[长度-1]

二、节点的新增

1.创建新节点:

var node=document.createElement(“标签名”);
返回值:返回一个新的节点对象

2.追加子节点:在最后一个子节点后追加节点

父节点.appendChild(子节点);

3.插入子节点:在指定的子节点前插入新节点

父节点.insertBefore(新节点,子节点);

三、节点的修改将指定的子节点修改为新节点
父节点.replaceChild(新节点,子节点);

四、点的克隆
节点对象.cloneNode(布尔类型数据)
参数:
true:克隆节点本身和所有子节点
false:克隆节点本身
返回值:克隆的新节点

五、节点的删除
删除子节点:删除父节点对应的子节点
父节点对象.removeChild(子节点);


http://www.ppmy.cn/news/1015449.html

相关文章

算法练习--leetcode 链表

文章目录 合并两个有序链表删除排序链表中的重复元素 1删除排序链表中的重复元素 2环形链表1环形链表2相交链表反转链表 合并两个有序链表 将两个升序链表合并为一个新的 升序 链表并返回。 新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入&…

02_ansible配置文件中属性介绍

3.Ansible的配置文件 转自:https://ansible-tran.readthedocs.io/en/latest/docs/intro_configuration.html#accelerate-connect-timeout 3.1.Ansible的配置文件 Ansible的一些的设置可以通过配置文件完成.在大多数场景下默认的配置就能满足大多数用户的需求,在一…

生态系统服务(InVEST模型)供给与需求、价值核算技术及人类活动、重大工程项目、自然保护区、碳中和等领域中实际案例分析

对接工作实际项目及论文写作,解决参会者关注的重点及实际项目过程问题,采取逐步延伸的逻辑,不论您是小白亦或是已经能够成功运行InVEST模型生成结果,您可以自由选择课程内容,如果您是小白老师手把手教您,如…

算法通关村第六关——如何使用中序和后序来恢复一颗二叉树

1 树的基础知识 1.1 树的定义 树(Tree):表现得是一种层次关系,为 n ( n ≥ 0 ) n(n≥0) n(n≥0)个节点构成的有限集合,当n0时,称为空树,对于任一…

h5端获取定位

第三方api有腾讯、高德、百度&#xff0c;下面简述腾讯位置api 引入jweixin.js <script> // 方法一 把js文件放到自己服务器上 import wx from /static/jweixin-1.6.0.js;// 方法二 vue在生命周期中应用 mounted() {const oScript document.createElement("scrip…

Centos7配置网卡信息及固定IP

找到网卡配置文件 Centos7之后的网卡配置文件统一放在/etc/sysconfig/network-scripts&#xff0c;在这个目录会找到以ifcfg开头的&#xff0c;和本机网卡数量对应的配置文件&#xff0c;如下: 执行该命令,进入该目录: cd /etc/sysconfig/network-scripts 再执行该命令 ll …

vue手把手教学封装分页器

1.vue中前台 <template><div><h6>"start":{{ pageStartEnd.start }},"当前页"&#xff1a;{{ pagenow }}"end":{{ pageStartEnd.end }}</h6><!-- 如果点击上一页按钮&#xff0c;当前页减去1&#xff0c;并且如果当…

对 async/await 的理解

async/await 的理解 async/await 其实是 Generator 的语法糖&#xff0c;它能实现的效果都能用then 链来实现&#xff0c;它是为优化 then 链而开发出来的。从字面上来看&#xff0c;async 是“异步”的简写&#xff0c;await 则为等待&#xff0c;所以很好理解async用于申明一…