首页 > 代码库 > 【3-31】操作属性、元素、内容及定时器

【3-31】操作属性、元素、内容及定时器

一、操作属性:

(1)添加属性:对象.setAttribute(“属性名”,“属性值”);--设置一个属性,添加或更改

注:若要添加属性已存在则会覆盖该属性,达到修改目的

(2)获取属性:对象.getAttribute(“属性名”);---获取属性值,若无该属性则返回null

(3)移除属性:对象.removeAttribute(“属性名”);---移除一个属性

例:

 <style type="text/css">
        
        #div1 {
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    
        <div id="div1" style="font-size:10px; ">这是内容</div>
    
</body>
</html>
<script type="text/javascript">
    var nav1 = document.getElementById("div1");
    nav1.onclick = function () {
        nav1.removeAttribute("style");
        nav1.setAttribute("style", "color:white");
        alert(nav1.getAttribute("style"));
    }
</script>

二、操作内容

1、赋值添加操作:(1)、普通元素.innerText="值";---以文本形式执行,不会执行其中代码;

(2)、普通元素.innerHTML=“值”;---可识别编程语句,并执行其中代码

(3)表单元素:表单元素.value="http://www.mamicode.com/值" 或直接添加属性(setAttribute)

2、取值:(1)变量名=普通元素.innerText;----以文本形式取出其中所有文本代码

(2)变量名=普通元素.innerHTML;---只取出其中文本,不会代码

(3)表单元素:变量名=表单元素.value

例:

 <style type="text/css">
        #div1 {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>
<script>
    var nav1 = document.getElementById("div1");
    nav1.onclick = function () {
        this.innerHTML = "<div class=‘div2‘>这是内容</div>";

    }
    nav1.onmouseover = function () {
        this.innerText = "<span>这也是内容</span>";
    }
</script>

技术分享技术分享

三、操作相关元素:

(1)同辈操作:1、变量名.nextSibling--找变量的下一个同辈元素,注意空格回车换行

2、变量名.previousSibling--找变量的上一个同辈元素,注意包含空格回车换行

(2)父辈级操作:1、变量名.parentNode--找变量的上一级父级元素

2、变量名.childNodes---找变量的下一级子元素,找出的是数组

3、变量名.firstChild---找第一个子级元素   lastChild---找最后以个子级元素,childNodes[i]---找第i个子级元素

4、alert(nodes[i]instanceof Text);--判断是不是文本,返回true/false

 四、定时器

 1、window.setTimeout(function(){},间隔时间毫秒);---延迟执行,只执行一次

2、window.setInterval(function(){},间隔时间毫秒);----间隔时间循环一次,一直循环

有返回值,可以用一个变量接受

3、window.clearInterval(要关闭的定时器对象);

【3-31】操作属性、元素、内容及定时器