龙江行程二维码下载_天津网站制作软件_网络服务提供者_网站运营推广选择乐云seo

HTML之JavaScript DOM操作元素（1）

            3.对元素进行操作1.操作元素的属性   元素名.属性名 = ""2.操作元素的样式   元素.style.样式名 = ""  样式名 "-" 要进行驼峰转换3.操作元素的文本   元素名.innerText   只识别文本元素名.innerHTML   识别文本的同时可以识别HTML代码4.增删元素 (见下一篇文章)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小标题</title><script>/*步骤：1.获得document DOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个var bbb = document.getElementsByTagName("input")var ccc = document.getElementsByName("aaa")var ddd = document.getElementsByClassName("a") 2.间接获取var cs = div01.children // 获取全部子元素var firstc = div01.firstElementChild// 通过父元素获取第一个子元素var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素var parentE = mmm.parentElement // 通过子元素获取父元素var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素3.对元素进行操作1.操作元素的属性   元素名.属性名 = ""2.操作元素的样式   元素.style.样式名 = ""  样式名 "-" 要进行驼峰转换3.操作元素的文本   元素名.innerText   只识别文本元素名.innerHTML   识别文本的同时可以识别HTML代码4.增删元素*/// 操作属性function op_attribute() {var v1 = document.getElementById("text1");// 语法：元素.属性名 = ""// 获得属性值console.log(v1.type)console.log(v1.value)v1.type = "button"v1.value = "变为按钮"}// 操作样式function op_Style() {var v2 = document.getElementById("text1")// 语法： 元素.style.样式名 = ""v2.style.color = "green";v2.style.borderRadius = "30px"; // 在css中用横线 - 连接的样式名在js中要采用驼峰式命名 eg:border-radius  -> borderRadius}// 操作文本function op_Text() {var v3 = document.getElementById("div01")// 语法  元素名.innerText   只识别文本//    or 元素名.innerHTML   识别文本的同时可以识别HTML代码console.log(v3.innerText)console.log(v3.innerHTML)v3.innerText = "你好"v3.innerText = "<h1>你好</h1>"v3.innerHTML = "<h1>你好</h1>"}</script><style>#text1 {color: red;}</style>
</head><body><input id="text1" type="text" value="hello"><hr><button onclick="op_attribute()">操作属性</button><button onclick="op_Style()">操作样式</button><button onclick="op_Text()">操作文本</button><div id="div01">hello</div>
</body></html>

龙江行程二维码下载_天津网站制作软件_网络服务提供者_网站运营推广选择乐云seo

HTML之JavaScript DOM操作元素（1）

最新新闻

热搜词