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

【Web APIs】DOM 文档对象模型 ① ( DOM 相关概念 - DOM 文档、DOM 树、DOM 节点 | 根据元素 ID 获取 DOM 元素 - getElementById 函数 )

, 形成一个完整的树状图 ; 二、获取 DOM 元素 1、获取 DOM 元素的常用方法 获取 DOM 元素的方法 : 根据 元素 ID 获取 DOM 元素 , getElementById 函数 ;...新方法 获取 DOM 元素 ; querySelector 函数 ; querySelectorAll 函数 ; 特殊 DOM 元素获取 ; 2、根据元素 ID 获取 DOM 元素 - getElementById...函数 根据元素 ID 获取 DOM 元素 , 调用 Web APIs 中提供的 getElementById 函数即可 , 该函数是 document 对象中定义的 , 使用时 一般通过 document...内置对象进行调用 ; var element = document.getElementById('id'); 上述调用示例中 , id 是 字符串变量 , 注意要使用 双引号 或 单引号 , 要获取的...HTML 元素的 ID ; element 返回值 是 获取DOM 元素 Element 类型对象 , 本章节参考文档 : getElementById 函数参考文档 : https://developer.mozilla.org

10610

js对象(BOM部分DOM部分)

JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览器对象模型...全局变量是 window 对象的属性。全局函数是 window 对象的方法。 接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。...id="end" onclick="end();"> 定时器示例 DOM DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法...HTML DOM 模型被构造为对象的树 DOMDOM标准规定HTML文档中的每个成分都是一个节点(node): 文档节点(document对象):代表整个文档 元素节点(element 对象):代表一个元素...根据class属性获取 document.getElementsByTagName 根据标签名获取标签合集 注意: 涉及到DOM操作的JS代码应该放在文档的哪个位置。

4.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

JS之文档对象模型DOM

Element DOM Attr DOM Text DOM Document HTML DOM是对XML DOM的扩展, HTML DOM比XML DOM 开发JS来说更加简单方便!...HTML DOM最优秀的地方是,操作form对象和table数据 1.BOM和HTML DOM关系图 学习DOM 编程,从Document对象开始,document代表当前HTML网页文档对象,是window...对象一个属性,可以直接使用 ,所有HTML DOM对象都是Document子对象 2.DOM编程开发 window.document 代表整个HTML文档 ①:通过document获得Node节点对象...元素常见操作 DOM 获取节点:节点查询 参上 DOM 改变节点:元素属性修改setAttribute(name,value) 内部文本元素的修改 innerHTML DOM 删除节点:removeChild...DOM 创建节点:document对象提供createElement() 创建元素、createAttribute(name) 创建属性、createTextNode() 创建文本节点 DOM 添加节点

3.3K60

JS对象Dom对象与jQuery对象之间的区别

通过js获取DOM对象就是js对象 当浏览器支持jsdom接口(api)时,这里狭义的dom对象是以js对象的形式出现的, 也就是一个js对象。...2)jQuery对象js对象区别 jQuery对象属于js的数组 jQuery对象是通过jQuery包装的DOM对象后产生的 jQuery对象不能使用DOM对象的方法和属性 DOM对象不能使用jQuery...var domObj = document.getElementById("id"); //DOM对象 var $obj = $("#id"); //jQuery对象; jQuery对象就是通过jQuery...$("#foo").html(); //获取id为foo的元素内的html代码,html()是jQuery特有的方法 等同于js中: document.getElementById("foo").innerHTML...举例: var $variable = jquery对象; 如果获取的是dom对象,则定义如下: var variable = dom对象

2.8K10

【Web APIs】DOM 文档对象模型 ② ( 根据标签名获取 DOM 元素 - getElementsByTagName 函数 | 获取指定标签下的 DOM 元素 )

函数 , 可以获取 指定标签名称 的 若干 Element 对象集合 ; 调用 Document 的函数 , 获取的是 整个文档的 指定标签名称 的元素 ; 调用 Element 的函数 , 获取的是... 标签 , 传入 "div" 参数 ; elements 返回值 : 返回的结果是 封装有若干 Element 对象的 HTMLCollection 对象 ; 该对象中的 DOM 元素顺序是按照...封装了多个 Element DOM 元素的 HTMLCollection 对象 ; HTMLCollection 对象是 时刻 动态改变的 , 如果 HTML 文档结构发生了改变 , HTMLCollection...对象会进行自动更新 , 如果要操作 HTMLCollection 对象 , 建议先创建副本 , 然后再进行操作 ; HTMLCollection 是个伪数组对象 , 可以 使用 数组下标的方式获取其中的...nav 下的 div // 先通过 id 获取 Element var element = document.getElementById('nav');

6110

JS遍历对象获取key:value

1、使用Object.keys()遍历 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性) var obj={"1":"a","2":"b"} Object.keys(...,其排列与使用 for…in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。...3、使用Object.getOwnPropertyNames(obj)遍历 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性) var obj={"1":"a","2":...对象声明: 1.var obj = {}//字面量,建议这种方式(方便初始化赋值) 2.var obj = new Object(); 对象赋值: 1.obj.name = "zhangsan" 2....obj["name"] = "zhangsan" 访问对象属性值: 1.obj.name 2.obj["name"] ==》底层转化为这种,所以建议使用 删除对象中的属性: delete

27.3K11

JSDOM对象常用知识点整理

JSDOM对象常用知识点整理 DOM树的介绍 获取元素对象的四种方式 通过元素ID获取对应元素对象---getElementByid(); 通过name属性获取所有需要的对象---getElementsByname...() 通过标签名获取符合要求的所有元素 通过class属性获取所有符合要求的元素 获取节点对象的注意事项 元素对象常见属性 value属性 className属性 checked属性 innerHtml...属性 ---- DOM树的介绍 ---- 获取元素对象的四种方式 通过元素ID获取对应元素对象—getElementByid(); 代码演示: <!...获取对应元素的对象,如果找不到返回null ---- 通过name属性获取所有需要的对象—getElementsByname() 注意:这里返回的是一个元素节点对象的数组,如果找不到对应的对象,返回一个空数组...获取某个/某些元素节点对象,必须保证元素节点对象被先加载到内存中 反例演示: <!

69730

【Web APIs】DOM 文档对象模型 ⑤ ( 获取特殊元素 | 获取 html 元素 | 获取 body 元素 )

在 HTML 标签结构中 , html 标签是最顶层的标签 , 所有的元素都在 html 标签内部 , body 标签是显示部分内容的 顶层标签 ; 通过 JavaScript 和 DOM...操作 可以获取上述两个 html 和 body 特殊标签 元素 ; 1、获取 html 元素 通过 document.documentElement 属性 , 可以获取文档中的 html 元素 , 该元素是...对象 2、获取 body 元素 使用 document.body 属性 , 可以获取 body 元素 ; 代码示例 : const bodyElement = document.body; console.log...(bodyElement); // 输出整个 元素的 DOM 对象 3、完整代码示例 在下面的代码中 , 通过 document.body 获取 body 元素 , 将背景颜色设置为黄色...'>Hello Hello Hello Hello2 <div id

13010
领券