首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Document.querySelector从p获取文本,不包括跨度值

使用Document.querySelector方法可以通过CSS选择器从文档中获取匹配的第一个元素。要从p元素中获取文本内容,可以使用以下代码:

代码语言:txt
复制
const pElement = document.querySelector('p');
const text = pElement.textContent;

这段代码首先使用选择器'p'来获取第一个匹配的p元素,然后使用textContent属性获取该元素的文本内容。

使用Document.querySelector方法的优势是可以通过灵活的CSS选择器来定位元素,使得代码更加简洁和可读性更高。

这种方法适用于需要获取特定元素的文本内容的场景,例如在网页中获取段落的文本内容进行处理或展示。对于跨度值的需求,可以使用其他方法或属性来获取和处理。

腾讯云相关产品和产品介绍链接地址:

请注意,以上链接仅为示例,具体的产品选择应根据实际需求和情况进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JS快速入门(二)

    --默认123--> 获取节点的方法(直接查找) 方法 说明 getElementById 获取带有指定id的节点 getElementsByTagName...可以使用索引获取节点集合中的某个元素节点(后续的节点集合也可使用这种方法) document.getElementsByTagName('p')[0] getElementsByClassName(...常用的节点属性获取方式 方法 说明 getAttribute() 返回元素一个指定的属性 直接使用属性名称获取 适用于部分属性(如:title,value,href) document.querySelector...如果属性已经存在,则更 新该;否则,使用指定的名称和添加一个新的属性; JS示例代码 <p class="item" title...)代码示例 //参数:name 为属性名,value 为属性 //将第一个p元素节点的title属性修改 document.querySelector('p').setAttribute('title

    6.6K30

    C1 能力认证——Web进阶

    () 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll() 获取指定选择器或选择器组匹配的所有节点集合 除了函数方法,我们还可以使用属性来获取节点信息,下表介绍了一些获取元素节点信息常用的属性...返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点 名称 描述 getAttribute() 返回元素一个指定的属性 直接使用属性名称获取 适用于部分属性...DOM属性获取元素父级节点 获取div内所有p元素和span元素,请补全横线处代码 document.querySelector('div').________ children # p元素和span元素皆为div元素的子元素,这里需要使用获取选定元素所有子元素的属性...如果属性已经存在,则更新该;否则,使用指定的名称和添加一个新的属性 通过属性名更改属性 对元素属性重新赋值可更改对应属性 DOM添加 名称 描述 createElement(tagName) 创建一个由标签名称

    3.2K30

    原生js获得八种方式,事件操作

    某个键盘的键被按下或按住 onkeyup 某个键盘的键被松开 onload 某个页面或图像被完成加载 onmousedown 某个鼠标按键被按下 onmousemove 鼠标被移动 onmouseout 鼠标某元素移开...onmouseover 鼠标被移到某元素之上 onmouseup 某个鼠标按键被松开 onreset 重置按钮被点击 onresize 窗口或框架被调整尺寸 onselect 文本被选定 onsubmit...提交按钮被点击 onunload 用户退出页面 三.使用方法 1.获取单个元素 2.单个元素发送的事件 3.发生的内容相关替换 let inp = document.querySelector('input...'); inp.onkeydown = function () { console.log('按下') }; 四.提取元素里面的内容 innerHTML:获取文本包括标签 innerText:...获取文本不包括标签 val:获取表单里面的 五.补充知识点 获取操作父标签修改子标签 比如说我们点击a类修改下面的b类 let xx = document.querySelector('.a'); xx.onclick

    3.3K10

    JavaScript——DOM基础

    节点:网页中所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示。 DOM把以上内容都看做是对象 获取元素 DOM在我们实际开发中主要用来操作元素。...获取页面中的元素可以使用以下几种方式: 根据ID获取 根据标签名获取 通过HTML5新增的方法获取 特殊元素获取 根据ID获取 使用 getElementById()方法可以获取带有ID的元素对象。...Element.getElementsByTagName('标签名'); 注意:父元素必须是单个对象(必须指明是哪一个元素),获取的时候不包括父元素自己。...显示系统时间 某个时间 123 var btn = document.querySelector...= document.querySelector('p'); p.innerText = getDate(); innerText和 innerHTML的区别

    6.6K20

    JS事件篇

    属性可以获取到当前元素所有子元素,不包括文本节点 区分概念: 节点包括文本节点,而元素不包括文本节点 firstChild获取当前元素第一个子节点 VS firstElementChild获取当前元素第一个子元素...document.all返回一个数组,保存页面里面所有的元素 getElementByClassName:根据class属性查询一组元素节点对象 document.querySelector 和querySelectorAll...,而其他浏览器都是9个 ---- children属性可以获取到当前元素所有子元素,不包括文本节点 ---- 区分概念: 节点包括文本节点,而元素不包括文本节点 ---- firstChild获取当前元素第一个子节点...(html); ---- document.all返回一个数组,保存页面里面所有的元素 ---- getElementByClassName:根据class属性查询一组元素节点对象 ---- document.querySelector...()但是可以使用 document.querySelector()代替 使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个 document.querySelectorAll

    12.6K10

    事件基础及操作元素

    var p = document.querySelector('p');        console.log(p.innerText);        console.log(p.innerHTML...获取属性的 元素对象.属性名 设置属性的 元素对象.属性名 = 案例代码    刘德华    <button id...获取属性的 元素对象.属性名 设置属性的 元素对象.属性名 = 表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的是布尔型。...的, 如果是0就切换为文本框,flag 设置(赋值)为1,如 果是1就切换为密码框,flag设置为0 实现代码:        <meta...使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用        var test = document.querySelector('div');

    1.4K20

    前端基础-节点操作

    ,参数为所要生成的文本节点的内容; node.appendChild() 接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点; node.hasChildNodes() 返回一个布尔,...('#d'); //获取原有属性 console.log(d.id); //修改原有属性 d.id = 'ff'; console.log(d.a); //...undefined //特殊:获取class类名,需使用className属性 console.log(d.className); d.className += ' hello';...id="p6">66666 var p2 = document.querySelector('#p2'); //下一个兄弟节点...之前,我们已经简单的使用过JS控制元素的CSS样式; 在具体使用的时候还有一些需要重点注意的细节: 名字需要改写,将横杠CSS属性名中去除,然后将横杠后的第一个字母大写: 比如background-color

    4.3K10

    回到基础:什么是DOM及DOM操作?

    文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web 页面进行交互。 什么是 DOM ?...window是一个全局对象,可以浏览器中运行的任何JS代码直接访问。...document.getElementsByTagName(tagName) 获取/设置元素的属性: // 括号传入属性名,返回对应属性的属性 element.getAttribute...// 返回元素的所有文本,包括html代码 element.innerHTML // 返回当前元素的自身及子代所有文本,只是文本内容,不包括html代码 element.innerText 获取当前节点的节点类型...如果只是想进行简单的交互和操作,请使用普通的JS。咱们甚至可以创建自己的迷你框架来抽象最常见的操作:创建元素、追加、创建文本。 总结 DOM是浏览器创建并保留在内存中的网页的虚拟副本。

    93310
    领券