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

时间：2016-03-08 20:55:34 阅读：237 评论：0 收藏：0 [点我收藏+]

－.获取元素改变属性

通过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 onclick="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 onclick="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 onclick="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 onclick="demo()">按钮</button>
    <button onclick="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" onclick="goodLunck(this)">I can do someting</h1>
    <br/>
    <button onclick="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()">
```

onmouseover 和 onmngouseout 事件

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

原文：http://www.cnblogs.com/isItOk/p/5255344.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

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

－.获取元素 改变属性

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

－.获取元素改变属性