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. 《linux就该这么学》第二节课，安装红帽7，基础命令至2.3小节的笔记

    笔记 实验环境: 1.安装注意事项:使用VM12版本   安装需要稍后安装系统.   自定义硬件DVD选择镜像位置.   自定义网卡仅主机.   自定义内存:大于等于4G,给予虚拟机2G,大于2G小于 ...

  2. beego 初体验 - 基础模块 - session, cookie

    beego 内建 session 模块 首先,需要在项目中开启 Session,两种方式,以编码的方式或配置 这是代码实现: 配置文件: 这是调用:

  3. 微信OpenID获取

    用户要求在微信端登录一次后,以后不需要再登录.  我的系统是单独的一个网站. 使用MVC的记住密码功能, 如果用户重启,就还是要输入密码,所以需要有一个唯一不变的用来标示用户的ID.  OpenID就 ...

  4. [ Python ] OpenGL

    pyOpenGL Installation Package Version------------------- -------numpy 1.14.2 PyOpenGL 3.1.0 PyOpenGL ...

  5. SpringMvc HandlerMethodResolver 的 handlerMethods & ServletHandlerMethodResolver 的 mappings 在哪里初始化的 ？

    HandlerMethodResolver 的 handlerMethods & ServletHandlerMethodResolver 的 mappings 在哪里初始化的 ? 如下图:

  6. SRCNN

    SRCNN(超分辨率卷积神经网络) 网络结构 l  Conv1: f1 = 9 *9 activation = ‘relu’ l  Conv2: f2 = 1 *1 activation = ‘rel ...

  7. 【题解】Luogu P2730 魔板

    蒟蒻的第一道蓝题--好像也没有蓝的程度 一篇无STL的超弱题解(入门写法无误了QAQ 传送门 很经典的一道BFS 这是初始状态. 操作A 操作B 操作C 思路1 不使用cantor展开的情况 1. 对 ...

  8. jQuery 新建函数

    jQuery 新建函数 格式一: // 格式一:新建添加函数方法并使用 $.extend({ 'xsk':function () { return 'xsk'; } }); // 调用 $.xsk() ...

  9. Weighted Quick Union

    Weighted Quick Union即: 在Quick Union的基础上对结点加权(weighted),在parent[i]基础上增加一个size[i]. 用来存储该结点(site)的所有子结点 ...

  10. 一、restful规范 二、CBV(View)源代码执行流程 三、drf框架安装和简单使用

    一.restful规范 ''' 它是一个规范,面向资源架构 十条规范 1.API与用户的通讯协议,总是使用HTTPs协议,确保了网络传输的安全性 2.域名 --https://api.example. ...