JS里的DOM操作注意点

最新推荐文章于 2024-08-17 11:12:57 发布

卑微的爱好者

最新推荐文章于 2024-08-17 11:12:57 发布

阅读量389

点赞数 1

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44022374/article/details/111661241

版权

1.Windows对象：浏览器窗口。

2.document：页面文件

3.通用的事件：

onclick 单击；

onmousemove 鼠标移动；
onmouseout 鼠标移出；
onmouseover 鼠标移上；

4.window.open

第一部分：写要打开的页面地址
第二部分：打开的方式，_blank 是在新窗口打开 _self
第三部分：控制打开的窗口，可以写多个，用空格隔开
toolbar=no新打开的窗口无工具条
menubar=no无菜单栏 status=no无状态栏
width=100 height=100 宽度高度
left=100 打开的窗口距离左边多少距离
resizable=no窗口大小不可调
scrollbars=yes 出现滚动条
location=yes 有地址栏

5.打开窗口，并保存在一个变量中

1
var w= window.open()；

如果只打开窗口一次，

if(w==null)
{
　　w=window.open("http://www.baidu.com","_blank","toolbar=no");
}

这里用一个if语句，判断w的值是否为空，打开一个窗口之后w的值就不为空了，之后再点击鼠标调用此函数则不执行打开新窗口。

<body>
 
        <input type="button"  value="打开窗口" onclick="Y()"/>
        <input type="button"  value="关闭窗口" onclick="G()"/>
  </body>
 
<script type="text/javascript">
　　　　　　　　　　var w = window.open();
        function Y()
        {
            if(w==null)
            {
                w = window.open("lizi.html","_blank","width=500 height=500");  
            }
        }
         
        function G()
        {
            w.close();
        } 
 
</script>

w.close：关闭保存在变量w中的那个窗口。

7.间隔与延迟

<body>
<input type="button" value="关闭间隔" onclick="Close()" />
 
 
</body>
 
<script type="text/javascript">
　　　　　　　　　　function Yan()
        {
            alert("aa");   
        }
        var c = window.setInterval("Yan()",2000);
        function Close()
        {
            window.clearInterval(c);   
        }
     
</script>

取对象

1.根据id名找 var d1 = document.getElementById(“d1”); 最多找一个；( )里面是名字，将找到的元素放在变量中。

alert(d1);

2.根据class名找 var d2 = document.getElementsByClassName(“d2”); 找出来的是数组

alert(d2[0]);

3.根据标签名找 var d3 = document.getElementsByTagName(“div”); 找出来的是数组

alert(d3[1]);

4.表单元素 var d4 = document.getElementsByName(“aa”); 找出来的是数组

alert(d4[1]);

操作

1.操作内容

var d1 = document.getElementById(“d1”);

获取内容 alert(d1.innerText); （只取里面的文字） alert(d1.innerHTML); （代码和文字都获取）

修改内容 d1.innerText = “这是修改”; d1.innerHTML = “这是修改”;

2.操作属性

var d1 = document.getElementById(“d1”);

获取属性

alert(d1.getAttribute(“width”));

设置属性

d1.setAttribute(“width”,“200”);

移除属性

d1.removeAttribute(“width”);

3.操作样式

var d1 = document.getElementById(“d1”);

获取样式(只能获取内联，内嵌和外部都不能获取)

alert(d1.style.color); alert(d1.style.backgroundColor);

修改样式

d1.style.backgroundColor = “”;

以上都是先获取，后应用。

例题：

1.鼠标放上一个栏，变红色，鼠标离开整个div，那个栏依旧是红色，可以确认当前是处于哪个栏的网页。

　　　　　　<style type="text/css">
            #caidan{
                width:600px;
                height:35px;
                border:1px solid #F33;
                }
            .xiang{
                float:left;
                width:100px;
                height:35px;
                text-align:center;
                line-height:35px;
                vertical-align:middle;
                }
             
       　　 </style>
 
<body>
　　　　　<div id="caidan">
            <div class="xiang" onmouseover="Huan(this)">淄博</div>
            <div class="xiang" onmouseover="Huan(this)">张店</div>
            <div class="xiang" onmouseover="Huan(this)">周村</div>
            <div class="xiang" onmouseover="Huan(this)">临淄</div>
            <div class="xiang" onmouseover="Huan(this)">沂源</div>
       　</div>
 
</body>
 
<script type="text/javascript">
   　　　 function Huan(a){
            var x = document.getElementsByClassName("xiang");  
            for(var i=0;i<x.length;i++)
            {
                x[i].style.backgroundColor = "white";
            }
            a.style.backgroundColor = "red";
        　}
 
</script>

另一种做法：

　　　　<style type="text/css">
            　　　　#caidan{
                width:600px;
                height:35px;
                border:1px solid #F33;
                }
            .xiang{
                float:left;
                width:100px;
                height:35px;
                text-align:center;
                line-height:35px;
                vertical-align:middle;
                }
             
        </style>
 
<body>
　　　　<div id="caidan">
            <div class="xiang" onmouseover="Huan(this)" onmouseout="Hui(this)">淄博</div>
            <div class="xiang" onmouseover="Huan(this)" onmouseout="Hui(this)">张店</div>
            <div class="xiang" onmouseover="Huan(this)" onmouseout="Hui(this)">周村</div>
            <div class="xiang" onmouseover="Huan(this)" onmouseout="Hui(this)">临淄</div>
            <div class="xiang" onmouseover="Huan(this)" onmouseout="Hui(this)">沂源</div>
        </div>
 
</body>
 
 
<script type="text/javascript">
         function Huan(a){
            var x = document.getElementsByClassName("xiang");  
            a.style.backgroundColor = "red";
        }
         
         
        function Hui(a){
            var y = document.getElementsByClassName("xiang");  
            a.style.backgroundColor = "white"; 
        }
 
 </script>