Javascript基础语法(三)

一. DOM
DOM对象：Document Object Model 文档对象模型、作用、通过DOM对象可以访问和操作html文件的每个标签、html文档加载到浏览器的内存中后、我们认为形成了一颗DOM树、而任何一个html签、标签属性和文本都是这个树上的节点元素。

<body>
    <div id="dv1" class="dv">我是dv1</div>
    <div id="dv2" class="dv">我是dv2</div>
    <div id="dv3" class="dv">我是dv3</div>
    <div id="dv4" class="dv">我是dv4</div>
    <input id="txt1" class="txt" name="txt" type="text" value="">
    <input id="txt2" class="txt" name="txtx" type="text" value="">
    <input id="txt3" class="txt" name="txt" type="text" value="">
</body>
<script>
    console.log(document.getElementById("dv1"));//根据ID获取元素
    console.log(document.getElementsByClassName("dv"));//根据类名获取元素
    console.log(document.getElementsByName("txtx"));//根据name获取元素
    console.log(document.getElementsByTagName("div"));//根据标签获取元素
    console.log(document.querySelector(".dv"));//获取第一个元素
    console.log(document.querySelectorAll(".dv"));//获取所有元素
</script>

1.1 注册事件
事件注册常用方式两种，一种在元素上注册事件，另一种在获取对象上注册事件
①在元素上注册事件

<input type="button" value="按钮"  onclick="clickMe()"> 
<input type="text" name="" id="txt1" value="阿猫" onchange="changeMe()">
<input type="text" name="" id="txt1" value="阿猫">
    <script>
         function clickMe() {
    
    //点击触发
            //获取标签对象
             var txt = document.getElementById("txt1");
             //通过对象获取属性
            alert(txt.value);//阿猫
             //通过点击目标获取对象在通过该对象获取属性
            alert(event.target.value);//按钮
         }
         function changeMe() {
    
    //改变触发
            alert(event.target.value);//阿猫111
         }
</script>

②获取元素对象，在对象上注册事件

 <script>
     var changeMe = function () {
    
    
         alert(event.target.value);
     }
     document.getElementById("txt1").onchange = changeMe;
</script>

1.2 动态操作元素
创建元素，添加子元素
点击按钮，添加文本框元素
点击按钮动态添加文本框

<body>
<input type="button" id="btnCreateNeTag" value="">
    <script>
         var btn = document.getElementById("btnCreateNeTag");
         btn.onclick = function () {
    
    
         var newTag = document.createElement("input");
         document.body.appendChild(newTag);       
         }
    </script>
</body>

在某个元素前添加元素
点击按钮，在按钮前面添加文本框元素
点击按钮动态添加文本框

<body>
    <input type="button" id="btnCreateNeTag" value="">
    <script>
         var btn = document.getElementById("btnCreateNeTag");
         btn.onclick = function () {
    
    
          var newTag = document.createElement("input");
           document.body.insertBefore(newTag,btn);
         }
    </script>
</body>

点击按钮，删除list节点

<body>
    <input type="button" id="btnCreateNeTag" value="">
    <ul id="ulList"><li>1</li><li>2</li><li>3</li></ul>
	<script>
    	var btn = document.getElementById("btnCreateNeTag");
         btn.onclick = function () {
    
    
           var list = document.getElementById("ulList");
           list.removeChild(list.childNodes[0]);//删除第一个节点
           list.removeChild(list.firstChild);//删除第一个节点
           list.removeChild(list.lastChild);//删除最后一个节点
           list.removeChild(); //这样写是错误的，加参数
         }
    </script>
</body>

点击按钮，添加新的标签
添加新的文字内容

<body>
    <input type="button" id="btnCreateNeTag" value="">
    <ul id="ulList"><li>1</li><li>2</li><li>3</li></ul>
    <script>
         var btn = document.getElementById("btnCreateNeTag");
         btn.onclick = function () {
    
    
             var newTag = document.createElement("div");
             newTag.innerHTML="你好啊!";
             document.body.appendChild(newTag);
         }
    </script>
</body>

1.3 获取元素内容
① innerHTML
获取元素中完整的内容

<body>
    <div id="dv1">
        <span>Hello </span>
        <span>world</span>
    </div>
    <script>
          var content=document.getElementById("dv1").innerHTML;
          console.log(content);
          //<span>Hello </span>
         //<span>world</span>
    </script>
</body>

② innerText
获取元素中文字部分的内容

<body>
    <div id="dv1">
        <span>Hello </span>
        <span>world</span>
    </div>
    <script>
          var content=document.getElementById("dv1").innerText;
          console.log(content);
          //Hello world
    </script>
</body>

1.3 操作样式
①style属性点击按钮改变样式

<body>
    <p id="p1">Hello world! P1</p>
    <p id="p2">Hello world! P2</p>
    <input type="button" value="变" onclick="change()">
    <script>
        function change() {
    
    
             document.getElementById("p2").style.backgroundColor = "red";
             document.getElementById("p2").style.color = "blue";
             document.getElementById("p2").style.fontFamily = "微软雅黑";
             document.getElementById("p2").style.fontSize = "20px";
             document.getElementById("p2").style.cssFloat = "right";
             //移动到右边
             var backColor = document.getElementById("p2").style.color;
             alert(backColor);//blue
             }
    </script>

② className属性
点击按钮设置P2的样式

<body>
    <p id="p1">Hello world! P1</p>
    <p id="p2">Hello world! P2</p>
    <input type="button" value="变" onclick="change()">
    <script>
        function change() {
    
    
              document.getElementById("p2").className = "ppp";
              alert(document.getElementById("p2").className);
              //ppp
             }
    </script>
    <style>
        .ppp {
    
    
            background-color: red;
            color: blue;
        }
    </style>
</body>

点击按钮设置多个标签的样式

<body>
    <p id="p1">Hello world! P1</p>
    <p id="p2">Hello world! P2</p>
    <input type="button" value="变" onclick="change()">
    <script>
        function change() {
    
    
            var els = document.getElementsByTagName("p");
            for (let i = 0; i < els.length; i++) {
    
    
               const element = els[i];
               element.style.backgroundColor = "red";
               }
            }
    </script>
    <style>
        .ppp {
    
    
            background-color: red;
            color: blue;
        }
    </style>
</body>

Javascript基础语法(三)

猜你喜欢