zoukankan      html  css  js  c++  java
  • js对元素属性.内容的操作。定时器。元素的平级,父级,子集关系。

    JS对元素内容的操作:

    1.操作样式(style)

    2.操作属性(Attribute)

    3.操作内容(innerHtml/Text)

    一。操作元素属性

    常见属性:class。id。style。disabled。

    自定义属性:可以自定义一个任意属性名称,可以任意放值,不会对所在元素本身有任何作用。

    this:代表所在最近的一个方法。

    设置一个属性:a.setAttribute("属性名称","属性值");【不存在该属性名称时,创建这个属性,并赋值。当存在该属性名称时,对属性的值进行覆盖操作。】

    获取属性的值:a.getAttribute("属性名称");【可以获取自定义属性的值】

    移除一个属性:a.removeAttribute("属性名称");

    二。操作元素内容

    1.获取表单类元素的内容【[form表单]基本的12个表单类元素。详细:http://www.cnblogs.com/kissdodog/archive/2013/01/10/2854917.html】

    取值方法:a.value="";

    2.获取非表单类元素的内容【div/span等】  

    取值方法:

    (1)a.innerText="";  

    添加内容时:【当该元素内部存在标记时,标记会被执行,但不显示标记】

    a.innerHTML="aaa<br/>aaa"              

    会执行标记<br/>产生换行,但不现实标记。

    获取内容时:【当该元素内部存在标记时,标记和字符串内容一起显示】

    <div id="a";><span>aaaa</span><div>

    获取id为a的元素内容为:<span>aaa<span>

    (2)a.innerHTML="";

    添加内容:【只获取元素内部的文本内容,会显示标记,但不会执行】

     a.innerHTML="aaa<br/>aaa"   

    添加后显示:aaa<br/>aaa   

    获取内容:【只显示字符串内容,不会显示标记】

    <div id="a";><span>aaaa</span><div>

    获取id为a的元素内容为:aaa

    3.常见应用

    (1)创建一个<div class="h1"></div>

    【1】a.innerHTML("<div class="h1"></div>");

    [该方法在使用时会产生覆盖效果,创建多个时使用‘+=’]

    【2】var a=document.createElement("div");

    a.setAttribute("class","h1");

    (2)自动换行:style="word-wrap:break;";

    三。定时器

    (1)只能执行一次的定时器

    window.setTimeout(function(){},执行倒计时);【1000毫秒=1秒】

    (2)不会被终止的定时器

    window.setInterval(function(){},间隔时间毫秒);【1000毫秒=1秒】

    终止方法:

    var a=window.setInterval(function(){},间隔时间毫秒);

    window.clearInterval(a);

     四。平级,子级,父级关系

    【平级,子级的空格和换行算一个位置】

    元素a的父级:a.parentNode

    元素a的平级中上一个元素:a.previousSibling      再上一个a.previousSibling.previousSibling

    元素a的平级中下一个元素:a.nextSibling             再下一个a.nextSibling.nextSibling  

    元素a的子级:

    第n个子级a.childNodes[n]

    第一个子级a.firstChild

    最后一个子级a.lastChild

                                                                            

  • 相关阅读:
    ios开发-2015-07-28
    ios开发-2015-07-27
    ios开发-2015-07-26
    ios开发-2015-07-25
    ios开发-2015-07-24
    ios开发-2015-07-23
    Selenium学习笔记之010:层级定位 分类: Selenium 2015-07-21 23:17 11人阅读 评论(0) 收藏
    Selenium学习笔记之007:定位一组元素
    Selenium学习笔记之007:定位一组元素 分类: Selenium 2015-07-21 23:03 9人阅读 评论(0) 收藏
    Selenium学习笔记之006:webdriver的八种定位方式 分类: Selenium 2015-07-21 22:33 11人阅读 评论(0) 收藏
  • 原文地址:https://www.cnblogs.com/zhangxin4477/p/6653553.html
Copyright © 2011-2022 走看看