DOM:document object module 文档对象模型

DOM就是描述整个html页面中节点关系的图谱，如下图。

1，通过ID，获取页面中元素的方法；（上下文必须是document）

document.getElementById('元素的ID');

2，通过name属性获取一组元素；（上下文必须是document）

<body>

    <input name = 'cniao' type='radio' value='菜'>

    <input name = 'cniao' type='radio' value='菜菜'>

    <script>

        var x = document.getElementByName('cniao');

        console.log(x);

    </script>

</body>

3，在整个文档中，通过元素的标签名获取一组元素；（上下文可以是document，也可以是一个元素）

document.getElementsByTagName('元素标签名')

<body>

    <div>

        <p> 这是第一个P标签</p>

        <p> 这是第二个P标签</p>

         <p> 这是第三个P标签</p>

    </div>

    <script>

       document.getElementByTagName('p')[].innerHTML = '你好，P标签'；

//当中括号里面的1改为[*]时，获取的是文档中的所有元素。

    </script>

</body>

4，通过类名获取元素，用法与getElementsByTagName类似；（上下文可以是document，也可以是一个元素）

getElementsByClassName;

5，以一个元素对象返回一个文档的文档元素；（只能是html这个标签）

document.documentElement;

6，获取body标签的方法；（是能是body标签）

document.body

7，匹配指定选择器的第一个元素；（上下文可以是document，也可以是一个元素）

querySelector()

8，通过选择器获取一组元素；(上下文可以是document，也可以是一个元素)

querySelectorAll

For循环

for （1开始执行的代码块，2定义循环条件，3循环被执行之后执行）{

被执行的代码块

};

for (var i = ; i<; i++){

    console.log( i );

};

循环里的关键字

break 跳出循环； continue 跳过本次循环；

function cniao(){

    var x = '', i = ;

    for (=;i<;i++){

        if (i==){

            break;       //循环到3时，就会结束；后面的数字不会循环出来；

        };

       x = x + '该数字' + i + '<br>'

     };

};
function cniao(){

    var x = '', i = ;

    for (=;i<;i++){

        if (i==){

            continue;       //跳过 i = 3这次循环，后面的数字会继续循环出来；

        };

       x = x + '该数字' + i + '<br>'

     };

};

While循环

while循环会在指定条件为真时循环执行代码块；

while (条件){

需要执行的代码

};

while ( i< ){

    x = x + "The number is " + i + "<br>";

    i ++;

}

do/while 循环

循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真，就会重复这个循环；

do{

需要执行的代码；

}

while (条件)

do{

    x = x + "This number is " + i + "<br>";

    i ++;

}

while ( i< );

getAttribute()方法，获取链接的target属性值；

<body>

    <a href = '' target = 'black'>对象属性</a>

    <p id = "demo">点击显示目标属性</p>

    <button onclick="cniao">点我</button>

    <script>

        function cniao(){

            var a = document.getElementsByTagName('a')[];

            document.getElementById("demo").innerHTML = a.getAttribute('taget')；

}

    </script>

</body>

setAttribute()方法设置元素的属性类型；

<body>

    <input value = "ok">

    <button onclick = 'cniao'>点我</buttom>

    <script>

        function cniao(){

            document.getElementsByTagName('input')[].setAttribute('type','button');

};

    </script>

</body>

removeAttribute()方法删除指定的属性；

<body>

    <h1 style = 'color:red'>Hello World</h1>

    <button onclick = 'cniao'>点我</button>

    <script>

        function cniao(){

            document.getElementsByTagName('h1')[].removeAttribute('style');

};

    </script>

</body>

DOM获取元素的方法的更多相关文章

  1. [DOM]获取元素：根据ID、标签名、HTML5新增的方法、特殊元素获取

    目录 [DOM]获取元素:根据ID.标签名.HTML5新增的方法.特殊元素获取 1.根据 ID 获取[.getElementById( )] 2.根据标签名获取[.getElementsByTagNa ...

  2. JavaScript通过元素id和name直接获取元素的方法

    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

  3. 关于dom获取元素的几种方式

    原文链接:https://blog.csdn.net/levinhax/article/details/71274456 获取元素DOM对象有很多种方法,以前一直在用getElementById和ge ...

  4. DOM获取元素、修改元素

    ## DOM获取元素.修改元素### 1.DOM#### ①什么是DOM?作用? > DOM是文档对象模型 > 作用:操作网页内容,可以开发网页内容特效和实现用户交互.#### ②DOM对 ...

  5. JQuery获取元素的方法总结

    JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实 ...

  6. 【鬼脸原创】JQuery获取元素的方法总结

    目录 一.说明 二.获取本身 三.获取同级元素 四.获取父级元素 五.获取子级元素 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本 ...

  7. selenium获取元素信息方法(转载)

    1.获取当前页面的Url函数 方法:current_url 实例: driver.current_url 2.获取元素坐标 方法:location 解释:首先查找到你要获取元素的,然后调用locati ...

  8. mui选择器和dom获取元素的区别（记得把mui对象转为dom对象才能调用用dom方法）

    <!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...

  9. 跟随标准与Webkit源码探究DOM -- 获取元素之querySelector，querySelectorAll

    使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentF ...

随机推荐

  1. MySQL变量的使用

    在mysql文档中,mysql变量可分为两大类,即系统变量和用户变量. 但根据实际应用又被细化为四种类型,即局部变量.用户变量.会话变量和全局变量. 一.局部变量 mysql局部变量,只能用在begi ...

  2. 解决CUDA driver version is insufficient for CUDA runtime version

    问题 在服务器上安装mxne的GPU版本 sudo pip install mxnet-cu80==1.2.1 然后在gpu上创建数据 import mxnet as mx mx.nd.array([ ...

  3. Java并发——Fork/Join框架与ForkJoinPool

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/4631466. ...

  4. TLS握手、中断恢复与证书中心的原因

    在双方都拿到随机数A.B.C后,将会使用这三个随机数生成一个对话密钥,然后使用该对话密钥进行对称加密通信,这种方式我们可以看到,安全性取决于随机数C的加密,前面的几个都是明文传的,这里就取决于服务器的 ...

  5. catch data

    抓取一些有反爬机制的website 喜马拉雅   每天都有-动态class 通过网络请求

  6. firefox 实现web交互机器人

    现在仅有火狐浏览器可以这样操作 -- Filefox 下面是项目目录 -- 前端页面 -- html <!DOCTYPE html> <html lang="en" ...

  7. CentOS6.5安装与配置Mysql数据库

    from:http://www.centoscn.com/mysql/2014/1211/4290.html 一.mysql简介 说到数据库,我们大多想到的是关系型数据库,比如mysql.oracle ...

  8. videojs+hls+rtmp流媒体播放

    前言:刚接触前端,小白一个,如有出错,请指正,谢谢! 注:视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类. 一.互联网网络流媒体简介 HTTP stream是各 ...

  9. java excel大数据量导入导出与优化

    package com.hundsun.ta.utils; import java.io.File; import java.io.FileOutputStream; import java.io.I ...

  10. 数据库只有mdf文件而没有ldf文件，如何恢复数据库

    举例:数据库名为 TestData 第一步: 新建一个同名的数据库即TestData数据库 第二步: 停掉数据库服务,找到刚才新建的TestData数据库的mdf和ldf文件,删掉ldf文件,再用之前 ...