DOM学习之如何修改元素,即修改 特性, 内容, 样式

1、修改内容: 3种方式修改内容
a. 获取或赋值元素的HTML内容:

元素.innerHTML

b. 获取或赋值元素的纯文本内容:

元素.textContent

c. 获取或赋值表单元素的值:

表单元素.value
如:input.vaue可获取或填写输入框内的文本

2、修改属性: 3种

a. 字符串类型的HTML标准属性: 2种:
1). 旧核心DOM: 4个函数

元素.getAttribute("属性名");
元素.setAttribute("属性名", "属性值")
var bool=元素.hasAttribute("属性名")
元素.removeAttribute("属性名")
//优点: 万能, 缺点: 繁琐

2). 新HTML DOM:

元素.属性名  (目前只发现id特性可用 , 如<div id="d1"></div>   则div.id 返回"d1")
元素.属性名="属性值"  (div.className = "类名")
元素.属性名!==""
元素.属性名=""

3. 修改样式:
a. 修改元素的样式:

元素.style.css属性="属性值"
也可用元素.style.样式名查询现样式, 但只对内嵌样式有效,赋值如上不受限制。
b. 获取元素的完整样式:

var style=getComputedStyle(元素对象);
style.css属性
//计算后的样式都是只读的

c. 批量修改元素的样式时,都用class:

元素.className="class名"

 

posted @ 2022-05-16 22:52  我歌且谣  阅读(604)  评论(0)    收藏  举报