首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JavaScript 学习-26.HTML DOM节点节点属性

它定义了: 作为对象的 HTML 元素 所有 HTML 元素的属性 访问所有 HTML 元素的方法 所有 HTML 元素的事件 换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准...DOM 节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性属性节点...我们常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。...节点属性DOM中,每一个节点都是一个对象,DOM节点有三个重要的属性: nodeName: 节点的名称 nodeValue: 节点的值 nodeType: 节点的类型 以这段html为例 <body...nodeName 属性获取节点的名称 nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text

1.3K20

再谈BOM和DOM(2):DOM节点层次属性选择器节点关系操作详解

DOM规定文档中的每个成分都是一个节点(Node),可以说HTML文档是由节点构成的集合,常见DOM节点有: 文档节点(Document):代表整个文档 元素节点(Element):文档中的一个标记 文本节点...(Text):标记中的文本 属性节点(Attr):代表一个属性,元素才有属性 DOM节点类型 NodeType属性来表明节点类型,下面列举12中节点类型 节点类型 描述 1 Element 代表元素...DOM节点关系 nodeType 返回节点类型的数字值(1~12) nodeName 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document nodeValue...文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null hasChildNodes 包含一个或多个节点时返回true contains 如果是后代节点返回true isEqualNode...://www.cnblogs.com/fjner/p/5892325.html 转载本站文章《再谈BOM和DOM(2):DOM节点层次/属性/选择器/节点关系/操作详解》, 请注明出处:https://

1.1K20

HTML DOM 节点

在 HTML DOM 中,所有事物都是节点DOM 是被视为节点树的 HTML。...---- DOM Nodes DOM 节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点...每个 HTML 属性属性节点 注释是注释节点 ---- HTML DOM 节点树 HTML DOM 将 HTML 文档视作树结构。...我们常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。 在节点树中,顶端节点被称为根(root)。...可通过节点的 innerHTML 属性来访问文本节点的值。 您将在稍后的章节中学习更多有关 innerHTML 属性的知识。

95340

JavaScript 学习-32.HTML DOM 获取和修改属性节点

前言 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性属性节点...注释是注释节点 属性节点 比如有一个p标签元素节点 点我看看 那么它有2个属性节点:id="p2"和class="text-center...)) // p2 console.log(p2.getAttribute('class')) // text-center 获取属性节点的值 比如有一个p标签元素节点...点我看看 它有的属性节点是:id="p2"和class="text-center" 属性节点是键值对的,可以根据属性名称,获取对应的值...修改元素属性节点的值跟前面获取属性方法一样,给属性重新复制即可 修改属性节点 <label

1.2K10

DOM盒子模型常用属性client,offset和scroll

JS盒子模型属性JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offset...最大卷去值:真实页面的高度 - 一屏幕的高度 document.documentElement.scrollHeight-document.documentElement.clientHeight 在JS...盒子模型13个属性中,只有scrollTop/scrollLeft是“可读写”属性,其余都是“只读”属性 操作浏览器的盒子模型属性,我们一般都要写两套,用来兼容各种模式下的浏览器 ?...通过JS盒模型属性获取值的特点 1.获取的都是数字不带单位 2.获取的都是整数,不会出现小数(一般都会四舍五入,尤其是获取的 偏移量) 3.获取的结果都是复合样式值(好几个元素的样式组合在一起的值),如果只想获取单一样式值...(例如:只想获取PADDING),我们的盒子模型属性就操作不了了 ,这不能说没有用,真实项目中,有时候我们就是需要获取组合的值来完成一些操作 [获取元素具体的某个样式值] 1.

1.3K10

javaScript 原生DOM节点操作(最实用的dom节点操作大全)

简单介绍一下DOM DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。...("body")[0] ("fatherNode"表示父节点,"childNode"表示子节点) 属性节点操作 添加属性节点 node.setAttribute('attr',"attrValue")...; 删除属性节点 div.removeAttribute("attr"); 修改属性节点 div.setAttribute("attr","new"); 获取属性节点 div.getAttribute(...简单讲,innerHTML可以在某种特定环境下重构某个元素节点DOM结构,而innerText只能修改文本值 总结 原生的DOM节点操作还是非常简单实用的,除了单词长了一点以外好像也没有什么明显的缺点...,当然当我们刚开始使用DOM节点操作的时候,还是会遇到一些坑的。

1.7K20

Js DOM

什么是DOM DOM,文档对象模型(Document Object Model)。 HTMLCollection 对象 注意:IE9及以上版本才支持!...所有节点都有的属性: nodeName,元素节点的 nodeName 是标签名称(大写),属性节点的 nodeName 是属性名称,文本节点的 nodeName 永远是 #text,文档节点的 nodeName...永远是 #document nodeType,元素节点返回1,属性节点返回2,元素或属性中的文本内容返回3 nodeValue,对于文本节点,nodeValue 属性包含文本。...对于属性节点,nodeValue 属性包含属性值。文档节点和元素节点,nodeValue 属性的值始终为 null。...获取所有子节点 - childNodes() 获取所有子节点(文本节点属性节点,元素节点,注释节点等等),有多个 我是

3.7K10

JSDOM对象常用知识点整理

JSDOM对象常用知识点整理 DOM树的介绍 获取元素对象的四种方式 通过元素ID获取对应元素对象---getElementByid(); 通过name属性获取所有需要的对象---getElementsByname...() 通过标签名获取符合要求的所有元素 通过class属性获取所有符合要求的元素 获取节点对象的注意事项 元素对象常见属性 value属性 className属性 checked属性 innerHtml...属性 ---- DOM树的介绍 ---- 获取元素对象的四种方式 通过元素ID获取对应元素对象—getElementByid(); 代码演示: <!...获取某个/某些元素节点对象,必须保证元素节点对象被先加载到内存中 反例演示: <!...t1.value="大忽悠"; ---- className属性 修改元素的样式 注意:class在JS中是关键字,因此使用className

68130

HTML事件属性--DOM

研究html的对象,事件和方法,从js的角度来思考,这个标签的属性是通过什么方法,触发什么事件来实现的 键盘鼠标事件 页面窗口事件 表单事件 一、window事件属性 针对window对象触发的事件...} 13.onpopstate 当浏览器窗口记录改变时运行的脚本, 14.onredo 当文档执行撤销时触发的事件 二、form事件属性 由html表单内触发的事件,通常使用在form元素中 1.onblur...有相似的地方,都是改变文本内容时触发事件 但是onchange是在input失去焦点时才触发,oninput是立刻触发 demo查看 7.oninvalid oninvalid事件要搭配required属性来使用...required如果使用该属性,代表必填字段,oninvalid是当元素无效时触发的事件 <input type="text" oninvalid="myfun()" required

3.7K20

JavaScript HTML DOM 节点列表

所有浏览器的 childNodes 属性返回的是 NodeList 对象。 大部分浏览器的 querySelectorAll() 返回 NodeList 对象。...访问第二个 元素可以是以下代码: y = myNodeList[1]; NodeList 对象 length 属性 NodeList 对象 length 属性定义了节点列表中元素的数量。...: document.getElementById("demo").innerHTML = myNodelist.length; length 属性常用于遍历节点列表。...NodeList 与 HTMLCollection 都有 length 属性。 HTMLCollection 元素可以通过 name,id 或索引来获取。 NodeList 只能通过索引来获取。...只有 NodeList 对象有包含属性节点和文本节点节点列表不是一个数组! 节点列表看起来可能是一个数组,但其实不是。 你可以像数组一样,使用索引来获取元素。

1.8K10
领券