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. SpringBoot框架的使用

    什么是SpringBoot Spring Boot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目.大多数SpringBoot项目只需要很少的配置文件. SpringBoo ...

  2. Spring框架第二天

    ## Spring框架第二天 ## ---------- **课程回顾:Spring框架第一天** 1. 概述 * IOC和AOP 2. 框架的IOC的入门 * 创建applicationContex ...

  3. Kafka笔记2（安装）

    1.安装java 2.安装zookeeper 3.安装kafka Broker 测试:发布消息 测试:读取消息 4,broker配置 常规配置: broker.id: 默认0  每个broker都需要 ...

  4. Java基础(basis)-----关键字final和static的作用

       1.关键字final      final修饰类:这个类就不能被继承      final修饰方法:不能被重写      final修饰属性:此属性就是一个常量,一旦初始化后,不可再被赋值.习惯 ...

  5. 改写pipeline

    为什么要改写方法:get_media_requests,他们的区别在哪里 def get_media_requests(self, item, info):#原始的 return [Request(x ...

  6. 面向对象select方法

    <?php class Table{         protected $tablename;         protected $arrTable;        protected $w ...

  7. Bugku-CTF之flag在index里

      Day15 flag在index里 http://123.206.87.240:8005/post/      

  8. socket实现文件传输

    server:===========================================import socketimport structimport jsonsk = socket.s ...

  9. tp剩余未验证内容-7

    bash脚本中 的 set -e表示 exit immediately if a simple command returns a non-zero value.主要是为了防止错误被忽略.会被立即退出 ...

  10. (转载)Unity UGUI鼠标点击UI不受影响方法IsPointerOverGameObject

    这几天在做捕鱼达人游戏时发现,当鼠标点击UI时,炮台的子弹也会发射子弹,这样会影响用户体验. 然后网上百度了一波,发现在UGUI系统上,EventSystem提供了一些方法.那就是EventSyste ...