微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  www.ymwears.cn
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

JAVASCRIPT DOM详细说明

发布时间:2021-05-10 来源:未知 点击:
  • 通过id获取文档元素
    var pElement = document.getElementById("myId");

    其中document表示整个文档,getElementById()document对象的一个方法,参数是id属性的值myId

    获取的pElement就代表了<p>标签以及里面的内容,接下来,可以通过pElement操作这个元素。比如可以用弹框展示一下<p>标签里面的内容:

    window.alert(pElement.innerText);
  • 通过类名获得文档元素

    文档元素的类名不唯一(存在多个文档元素的类名相同的情况),如下:

    <p class="myName">段落</p>
    <a class="myName" href="https://www.educoder.net">这是一个链接</a>

    documentgetElementsByClassName()方法用来获取指定类名的文档元素数组(NodeList,一般叫节点列表),如下:

    var myNodeList = document.getElementsByClassName("myName");

    这样,myNodeList[0]就是<p>元素,而myNodeList[1]就是<a>元素,通过这个方法的名字我们也可以知道获取的标签不唯一。

  • 通过标签名获得文档元素
    <div id="div1">
        <p id="p1">文本1</p>
        <p id="p2">文本2</p>
        <a name="a1">链接</a>
    </div>
    <div id="div2">
        <p id="p3" name="a1">文本3</p>
    </div>

    标签名指的是<>里面的字符串,document对象的getElementsByTagName()获取整个文档中指定名字的所有标签,显然,结果是一个文档元素数组(节点列表),方法的名字也暗示了这一点。获取所有的<div>元素,如下:

    var allDiv = document.getElementsByTagName("div");

    我们获取到的文档元素,也有getElementsByTagName()方法,作用是获取该元素内部指定名字的所有子元素。比如,要获取第一个<div>里面所有的<a>元素,代码如下:

    //变量allDiv上面有,这里不再重复!
    var allLink = allDiv[0].getElementsByTagName("a");

    这样就获取了第一个<div>里面的所有超链接元素。

  • html5中获取文档元素(一)
    var myElement =  document.querySelector(".css1");
    console.log(myElement.innerText);//输出“CSS选择器”

    querySelector返回匹配指定css选择器的第一个元素。

  • html5中获取文档元素(二)
    var allP = document.querySelectorAll(".pClass");

    如果一个选择器控制的元素有多个,而且我们需要取到这些元素,就需要用querySelectorAll方法,该方法返回指定的选择器对应的多个元素。

  • 结点数上的操作
    <body>
    <div id="div1">
        <div class="cl1">
            <p>文本</p>
            <a>超链接</a>
        </div>
        <div class="cl2">
            <select id="se">
                <option></option>
                <option></option>
                <option></option>
            </select>
        </div>
    </div>
    </body>

    首先,我们获取最外层的div节点:

    var div1 = document.getElementById("div1");

    然后获取它的第一个子节点(class值为cl1的节点):

    //firstElementChild表示第一个子节点
    var cl1 = div1.firstElementChild;

    再获取cl1的最后一个子节点,即a节点:

    //lastElementChild表示最后一个子节点
    var aElement = cl1.lastElementChild;

    previousElementSibling表示前一个兄弟节点。比如获取上面的超链接的前一个节点p,然后在控制台打印p的内容,代码以及效果如下:

    var left = aElement.previousElementSibling;
    console.log(left.innerText);

    nextElementSibling表示后一个兄弟节点。显然,上面的p元素的后一个兄弟节点是a元素,打印一下a的内容:

    var right = left.nextElementSibling;
    console.log(right.innerText);

    children[0]表示第一个子节点,以此类推。比如依次在控制台打印出上面的select标签的三个子节点:

    var selectTag = document.getElementById("se");
    console.log(selectTag.children[0].innerText);
    console.log(selectTag.children[1].innerText);
    console.log(selectTag.children[2].innerText);

    children.length:子节点的个数;

    console.log(selectTag.children.length);//输出3
  • 属性值的获取
    <a href="https://www.educoder.net" target="_blank">EduCoder</a>

    先获取文档元素:

    var aElement = document.getElementsByTagName("a").[0];

    然后通过获取到的元素的属性名来得到属性值:

    var hrefValue = aElement.href;
    console.log(hrefValue);//输出https://www.educoder.net

    getAttribute(a)用来获取属性值,a表示属性的名字。比如上面获取超链接的href属性值,也可以这样写:

    console.log(aElement.getAttribute("href"));//输出https://www.educoder.net

    区别是:getAttribute()返回的值统一为字符串,而第一种方法会返回属性实际的值,比如<input>maxLength属性的值应该是数值,第一种方法就会返回数值,getAttribute()返回了字符串:

    <input type="name" maxLength=16 id="inputId"/>
    //typeof检测变量的类型
    var result1 = document.getElementById("inputId").maxLength;//返回16
    var result2 = document.getElementById("inputId").getAttribute("maxLength");//返回"16"
    console.log(typeof(result1));//输出number
    console.log(typeof(result2));//输出string

    class等文档元素的属性,不能直接用文档元素对象.class来获取,因为classJavaScript中的关键字,需要用className来代替。

    但是,如果用的是getAttribute(),直接用class作为参数就行。

    <a class="aClass" id="aId">超链接</a>
    document.getElementById("aId").className;//返回"aClass"
    document.getElementById("aId").getAttribute("class");//返回"aClass"
  • 属性值的设置
    <a id="a1" href="https://www.google.com">EduCoder</a>

    设置超链接的href属性的值的表达式如下:

    document.getElementById("a1").href="https://www.educoder.net";

    需要注意:标签之间的文本用innerText属性表示,要修改上面超链接里面的文本,需要这样:

    document.getElementById("a1").innerText="educoder";

    没错,setAttribute(a,b)就是一个与getAttribute()对应的方法,参数a是你要设置的属性的名字,参数b是你要设置的属性的值。

    所以上面的操作(设置href)也可以这样写:

    document.getElementById("a1").setAttribute("href","https://www.educoder.net");


     


这就是微学网-程序员之家为你提供的"JAVASCRIPT DOM详细说明"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14438.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 | 学习教程 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2021 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

菜鸟学习网,提供各类程序编程入门,技巧