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

JavaScript 教程「9」:DOM 元素获取、属性修改

('div'); console.log(div); 匹配的多个元素 之前我们已经学习了如何获取匹配的首个元素,但是在日常开发中,我们常常需要获取匹配到的多个元素...最常见的几种总结如下: 根据 id 获取一个元素 document.getElementById('id 元素名'); 根据标签获取页面中的一类元素 document.getElementsByTagName...('标签名'); 根据类名获取页面中的元素 document.getElementsByClassName('类名') 以下是一个分别利用上述方法来获取页面中 DOM 元素的实例。...既然已经学会了如何获取 DOM 元素,接下来就是看看如何修改元素中的内容。...CSS 时,需要注意一下,如果原先的元素中已经有了 CSS 类,那么此时新增的 CSS 类将覆盖之前 CSS 类。

2.6K41
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性

    问题一:Firefox,Chrome、Safari和IE9都是通过非标准事件的pageX和pageY属性来获取web页面的鼠标位置的。...解决方法:统一通过getAttribute()获取自定义属性 document.getElementById('box').getAttribute('id');//获取元素的 id 值 document.getElementById...('box').id;//获取元素的 id 值 document.getElementById('box').getAttribute('mydiv');//获取元素的自定义属性值 document.getElementById...IE6/7不区分id和nam 在IE6/7下使用getElementById和getElementsByName时会同时返回id或name与给定值相同的元素。...IE8下querySelectorAll不支持伪类  有时候伪类是很好用,IE8并不支持,jquery提供的:first、:last、:even、:odd、:eq、:nth、:lt、:gt并不是伪类,我们在任何时间都不要使用它们

    97940

    【javascript系列】史上最全javascript系列教程(二)

    这两个都是对元素的一个操作,简单讲,innerHTML可以在某种特定环境下重构某个元素节点的DOM结构,innerText只能修改文本值。...给获取到的元素⼀些内容,document.getElementById(‘id名’).innerHTML=‘内容’。 innerText='这里是被注入的内容' 效果:本来div标签下面是没有文字的,获取标签后给到元素文字显示。...JS常见事件 Js事件就是我们的行为能被侦测到,且触发相应的函数(函数里面写上事件的行为) 1. onmouseover ⿏标被移到某元素之上 2. onmouseout ⿏标从某元素上⾯移开...,获取到焦点就是当你把鼠标放进输入框,之后点击一下,鼠标变成一条竖线之后输入的那种。

    2.2K30

    「Web编程API」- 01

    根据ID获取 语法:document.getElementById(id) 作用:根据ID获取元素对象 参数:id值,区分大小写的字符串 返回值:元素对象 或 null 案例代码 ...改变元素内容(获取或设置) innerText改变元素内容 显示当前系统时间 某个时间 1123元素的属性操作 获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 案例代码 id="ldh">刘德华 元素的属性操作 获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型...如果想要保留原先的类名,我们可以这么做 多类名选择器 // this.className = 'change'; this.className = 'first

    66650

    前端成神之路-WebAPIs01

    根据ID获取 语法:document.getElementById(id) 作用:根据ID获取元素对象 参数:id值,区分大小写的字符串 返回值:元素对象 或 null 案例代码 ...(注意:这些操作都是通过元素对象的属性实现的) 1.5.1. 改变元素内容(获取或设置) ?...获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 案例代码 id="ldh">刘德华 id...获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。...如果想要保留原先的类名,我们可以这么做 多类名选择器 // this.className = 'change'; this.className = 'first

    84010

    【JavaScript】JavaScript开篇基础(4)

    3.获取元素 1. document.getElementById('id')方法获取带有ID的元素对象 (参数必须是字符串) 2.根据标签名获取 :document.getElementsByTagName...3.document.getElementsByClassName('类名'); //根据类名获取集合,也就是伪数组 4.document.querySelector('选择器');//获取指定选择器的第一个元素对象...元素.innerText 可以直接获取元素中的文本,但不带有任何内部标签。 元素.innerText = 值 设置元素之间的文本,其中文本内不能有标签,因为它不会识别。...= 'blue'; element.style.width = '200px'; element.className 是一个 JavaScript 属性,用于获取或设置 HTML 元素的类名(class...这是在 DOM 操作中常用的方法之一。 因为可以设置类名,所以我们可以通过修改类名去修改元素属性。 <!

    9510

    基于某政府招标网的爬虫

    介绍 基于某政府招标网的数据采集类爬虫,可以获取招标工程信息。利用Python的selenium模块操作浏览器自动化测试工具webdriver来运行。...一些问题 数据准确性: 由于该网站的中标公示信息并不是采用统一的格式,所以获取中标详细信息可能会出现失败(例如:中标金额和中标单位),所以需要根据不同页面的不同格式来做出相应的处理。...编程笔记 关于xpath获取元素 如图所示:使用xpath语法//tbody//td[2]获取的并不是整个tbody中的第二个td元素,而是tbody下一级中所有的所有的第二级的td元素。...获取页面隐藏元素的text 之前遇到的疑问: 使用xpath定位时,最好先将浏览器窗口滚动到屏幕上,否则元素获取不准确,有时候还获取不到,不要以为只要元素只要在当前html文档中就能获取!!!...在这些情况下,我们需要获取隐藏元素的文本。

    1.8K11

    事件基础及操作元素

    ('btn');        //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下        //(3) 事件处理程序 通过一个函数赋值的方式...(注意:这些操作都是通过元素对象的属性实现的) 2.1. 改变元素内容(获取或设置) ?...获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 案例代码    id="ldh">刘德华    id...获取属性的值 元素对象.属性名 设置属性的值 元素对象.属性名 = 值 表单元素中有一些属性如:disabled、checked、selected,元素对象的这些属性的值是布尔型。...如果想要保留原先的类名,我们可以这么做 多类名选择器            // this.className = 'change';            this.className = 'first

    1.4K20

    原生 JS DOM 常用操作大全

    getElementsByCalssName (class类名) 以class类名获取元素参数 calss类名返回 对应类名的元素对象集合 盒子1 盒子2 首页 产品 querySelector...(选择器 ) 可以是任意的选择器 例如:id、标签名、类名参数: 可以是 id 、类名、标签 选择器返回:该模式匹配的第一个元素 注意 : 需要在选择器前加符号 例如 .box 、 #nav。...与前面介绍的不同 盒子1 盒子2 首页 产品 querySelectorAll (选择器) 可以是任意的选择器 例如:id、标签名、类名参数: 可以是 id 、类名、标签 选择器返回...事件源 (具体作用在哪 个元素或标签上)事件类型 (指的是 例如:鼠标的点击,双击,经过,键盘的按下的键)处理程序 ( 指的是 事件触发后浏览器调用对应的处理程序(以函数的形式),也称为事件处理函数)...Element.className=" " //值为空或null 可使元素的类名置空 Element.classList.add ("类名") // 添加类名操作 可添加多个 不会覆盖原有的类名

    10810

    Java中XML运用总结

    标记名称 允许重复 7. 标记除了开始和结束 , 还有属性. 标记中的属性, 在标记开始时 描述, 由属性名和属性值 组成....UTF-8序列的字节1无效,这里提供一个解决方案一个是将books.xml里面的 encoding=”UTF-8″改成 encoding=”GBK”或者 encoding=”GB2312″或encoding...测试结果: DOM4J – XPATH解析XML 路径表达式 通过路径快速的查找一个或一组元素 路径表达式: 1. / : 从根节点开始查找 2. // : 从发起查找的节点位置 查找后代节点...怎么读取xml,那么当用到需要将Java里面的数据转换成xml格式发送出去的时候,是如何转换的呢(这个在以后的开发里面已经很少用到了,更多程序员使用json格式,作为了解)。...(默认节点名称为 包名.类名) x.alias(“节点名称”,类名.class); 3.

    1.1K20

    【如果你要学JS⑧】——事件三要素,事件处理程序

    1.事件三要素1.事件源:事件被触发的对象2.事件类型:如何触发 什么事件 比如鼠标点击(onclick),鼠标经过亦或是键盘按键3.事件处理程序:通过一个函数赋值的方式完成2.执行事件步骤1.获取事件源...2.绑定事件(或注册事件)3.添加事件处理程序 id="butn">像素人是谁?...(或注册事件)butn.onclick //3.添加事件处理程序 butn.onclick = function () { alert('像素人是一名前端...') } 3.常见的鼠标事件 4.操作元素JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容...element. innerText和element. innerHTML具有可读性,可以获取元素内容element. innerText不进行标签的识别,还会去除空格和换行

    61710

    JavaScript——DOM基础

    获取页面中的元素可以使用以下几种方式: 根据ID获取 根据标签名获取 通过HTML5新增的方法获取 特殊元素获取 根据ID获取 使用 getElementById()方法可以获取带有ID的元素对象。...('.类名'); document.querySelector('#ID名'); document.querySelector('标签名'); querySelectorAll()返回指定选择器的所有元素对象集合...事件源:事件被触发的对象,谁被点击---按钮 事件类型:如何触发,什么事件,比如鼠标点击(onclick)还是鼠标经过或者是键盘按下。 事件处理程序:通过一个函数赋值的方式完成。...> innerText和 innerHTML的区别 innerText不识别html标签,非标准 innerHTML识别html标签,W3C标准 这俩个属性是可读写的,可以获取元素里面的内容。...class因为是个保留字,因此使用className来操作元素类名属性 className会直接更改元素的类名,会覆盖原先的类名 注意:如果想要保留原先的类名,可以选择多类名选择器 this.className

    6.6K20

    XmlDocument类

    Implementation    获取当前文档的 XmlImplementation 对象。 InnerText       获取或设置节点及其所有子节点的串联值。...Prefix         获取或设置该节点的命名空间前缀。 (继承自 XmlNode。) PreserveWhitespace 获取或设置一个值,该值指示是否在元素内容中保留空白。...Schemas       获取或设置与此 XmlDocument 关联的 XmlSchemaSet 对象。 Value         获取或设置节点的值。 (继承自 XmlNode。)...Article节点,再获取其下的第一个子节点 然后再获取该节点下的属性集合 XmlAttributeCollection xc = doc.SelectSingleNode("Article...//输出 author:张三 length:12000 price:30 Name获取的是限定名,也就是标记名称 } XmlElement xe

    1.3K20

    JS快速入门(二)

    父节点拥有子节点,同级的子节点被称为同胞(兄弟或姐妹) 常用节点获取方法和属性 要进行 DOM 操作,首先要获取到需要操作的节点或节点集合,接下来以下面的示例代码为基础,介绍常用的 DOM 获取方法和属性...() 获取带有指定标签名的节点集合 getElementsByClassName() 获取带有指定类名的节点集合 querySelector() 获取指定选择器或选择器组匹配的第一个节点 querySelectorAll...() 获取指定选择器或选择器组匹配的所有节点集合 getElementById案例 //获取 id 为 container 的节点 document.getElementById('container...属性返回一个元素类属性集合(这里可以简单理解为类名的集合),通过使 用 classList 中的方法可以方便的访问和控制元素类名,达到控制样式的目的 classList 常用方法: 方法 说明...add(class1, class2, …) 添加一个或多个类名 remove(class1, class2, …) 移除一个或多个类名 replace(oldClass, newClass) 替换类名

    6.6K30
    领券