创建一个自己的动态HTML-备

最新推荐文章于 2021-06-10 17:02:13 发布

weixin_34128411

最新推荐文章于 2021-06-10 17:02:13 发布

阅读量127

点赞数

文章标签： javascript ViewUI

－.获取元素改变属性

通过id来获取HTML元素
通过标签名找到HTML元素
通过类名来找到HTML元素

举个?

通过<p>标签的id 获取对象并改变其中的值

Text-01
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScriptDOMText</title>
 <script>
 function demo (){
 var p1 = document.getElementById("pid");
 p1.textContent = "asdsdsaas";
 }
 </script>
</head>
<body>
 <p id="pid">This p tag,we can changed it</p>
 <button οnclick="demo()">按钮</button>

</body>
</html>

以上是摘要

以下是余下全文

通过标签名查找HTML

HTML 标签顺序执行自上而下所以获取的标签为多个的时候按照出现顺序查询即可

Text-02

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScriptDOMText</title>
 <script>
 function demo (){
 var x= document.getElementById("main");
 var y = x.getElementsByTagName("p");
 document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);
 }
 </script>
</head>
<body id="main">
 <p >This p tag,we can changed it sdasasd</p>
 <p >This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p>

 <button οnclick="demo()">按钮</button>

</body>
</html>

Text-03

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScriptDOMText</title>
 <script>
 function demo (){
 var x= document.getElementById("main");
 var y = x.getElementsByTagName("p");
 y[0].innerHTML = "good good Study"

 y[2].innerHTML = "day day up"
 }
 </script>
</head>
<body id="main">
 <p >This p tag,we can changed it sdasasd</p>
 <p >This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p>

 <button οnclick="demo()">按钮</button>

</body>
</html>

综上我们获取了元素后就可以改变元素相应的属性给予新的值

在实际使用中我们经常需要改变HTML元素的CSS样式结合Text-03 我们说下如何修改CSS 样式

y[1].style.color = "red";

获取元素并通过style获取属性并改变字体颜色

工作中我们经常需要某个元素隐藏或消失

举个?：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JavaScriptDOMText</title>
 <script>
 function demo (){
 var x= document.getElementById("main");
 var y = x.getElementsByTagName("p");
 y[0].innerHTML = "good good Study"

 y[2].innerHTML = "day day up"

 y[1].style.color = "red";

 y[3].style.visibility = "hidden"; //隐藏文本 但不减少高度
 }
 function demo2(){
 document.getElementById("pid").style.visibility = "visible";
 }
 </script>
</head>
<body id="main">
 <p >This p tag,we can changed it sdasasd</p>
 <p >This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p>
 <p id="pid">This p tag,we can changed it</p>
 <p >This p tag,we can changed it</p> 
 <button οnclick="demo()">按钮</button>
 <button οnclick="demo2()">显示文本</buton>

</body>
</html>

二.HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

先看下代码：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
 function goodStudy (id){
 id.innerHTML = "good good study day day up";
 }

 function goodLunck (id){
 id.innerHTML = "asdsadasdas"
 }
 </script>
</head>
<body>
 <h1 id="h1" οnclick="goodLunck(this)">I can do someting</h1>
 <br/>
 <button οnclick="goodStudy(h1)">按钮</button>
</body>
</html>

事件处理调用函数通过id 获取对象改变属性

工作中常用事件：

onload 和 onunload

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
```
<body onload="checkCookies()">
```
onchange 事件当用户改变输入字段的内容时，会调用 upperCase() 函数
```
<input type="text" id="fname" onchange="upperCase()">
```