JS----文档对象模型

DOM: document object model

文档对象模型提供了一套可以访问和修改HTML文档内容的方法
访问：获取
修改：设置

1 JS要去操作HTML元素，必须要先用JS找到他，转换为JS的DOM对象

操作：
a 标签属性
b css属性
c 元素内容

2 找对象的方法

a 通过标签名来找对象
var DOM_OBJ=document.getElementsByTagName("标签名");
返回的是集合（数组），即使只有一个标签，返回的也是一个集合
b 通过id名来找对象：id名是唯一的
var DOM_OBJ=document.getElementById("id名");
c 可以组合使用标签名和id名的方式来获取对象
d 通过name属性名来找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByName("nameValue");
e 通过css类名找对象,返回的是一个集合
var DOM_OBJ=document.getElementsByClassName("类名");

3 操作标签的属性

获取：var attVa=DOM_OBJ.属性名;//attruibute
设置：DOM_OBJ.属性名=attVa;

4 操作CSS属性

获取：var cssVa=DOM_OBJ.style.css属性名;//只能获取内联式(嵌入式)的css属性值
设置：DOM_OBJ.style.css属性名=cssVa;//设置的是内联式(嵌入式)的css属性值
background-color===>backgroundColor
list-style===>listStyle

5 操作内容

获取
非表单元素：var txt=DOM_OBJ.innerHTML;
表单元素：var txt=DOM_OBJ.value;
设置
非表单元素：DOM_OBJ.innerHTML=txt;//会将原有的内容替换掉
表单元素：DOM_OBJ.value=txt;
区分document.write()和innerHTML
前者是方法后者是属性
前者只能用document这个对象，后者可以是任意的非表单元素DOM对象
前者不会覆盖原有的东西，后者会覆盖原来的内容

转载于:https://www.cnblogs.com/liaohongwei/p/7631475.html

JS----文档对象模型相关推荐

JavaScript编程：文档对象模型DOM
5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...
javascript-----DOM文档对象模型
1.DOM分类 DOM:文档对象模型,提供了添加.移动.该变.或移除的结构文档的方法和属性 DOM Core:锁定一批标签,看成dom对象,进行业务分析 HTML DOM :把标签和属性看成是一个DO ...
DOM 文档对象模型
DOM 文档对象模型 1. Web API 的概念 api:应用程序接口.是基于编程语言构建的结构,使开发人员更容易地创建复杂的功能 Web API:是 Web 的应用程序编程接口,浏览器 API 可 ...
javaScript文档对象模型DOM
文档对象模型DOM 文档对象模型(document object model) 有一个表格,点击添加按钮添加事件 DOM中的属性和方法的理解 DOM中属性的操作: 属性映射表文档对象模型(docum ...
BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...
文档对象模型dom_什么是文档对象模型，以及为什么应该知道如何使用它。
文档对象模型dom by Leonardo Maldonado 莱昂纳多·马尔多纳多(Leonardo Maldonado) 什么是文档对象模型,以及为什么应该知道如何使用它. (What's the ...
Node.js 文档（目录）
Node.js 文档 Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时. 提供以下几种类型的文档: API参考文档 ES6功能指南 API参考文档 ...
文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
js笔记（五）文档对象模型DOM
大标题小节一.DOM选择器 1. id 选择器:getElementById("id名"): 2. class 选择器:getElementByClassName(" ...
JavaScript——文档对象模型
一.基本概念文档对象模型(DOM)是表示文档和访问.操作构成文档的各种元素的应用程序接口(API).它解决了NetScape的JavaScript和Microsoft的JavaScript之间的冲突 ...

JS----文档对象模型

JS----文档对象模型相关推荐

最新文章

热门文章