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. Python基础(一)常用函数

    1.map() 此函数可以,将列表内每一个元素进行操作,并返回列表 原型 map(function,[list]) def fc(x): return x * 2 print(map(fc,[1,2, ...

  2. 使用freemarker和itext把html转pdf

    1.把html转pdf,首先必须要解决中文显示问题,CSS样式问题以及可能的JS问题,先上例子,自己去体会. 2.先去下载simsun.ttc字体: 2.demo.html <!DOCTYPE ...

  3. django开发(一)

    django基础 1.django配置模块的各文件作用 一般来说标红的文件是需要我们具体配置和修改等的文件 2.django项目和功能编写的步骤 注:上面是功能模块,下面是配置模块.配置和功能解耦分离 ...

  4. Python xml模块

    xml模块 自己创建xml文档 import xml.etree.cElementTree as ET new_xml = ET.Element("personinfolist") ...

  5. Python events

    Events不同线程之间同步对象 参数说明: # 实例化event对象 event = threading.Event() # 等待检测标志位被设定,标志位设置后就不阻塞了 # 客户机线程可以等待设置 ...

  6. springboot跑定时任务

    使用@Scheduled注解实现 1.在启动类上加上@EnableScheduling 开启定时任务 2.新建一个任务类,在方法上添加@Scheduled注解 @Componentpublic cla ...

  7. Python3 tkinter基础 Menu 添加菜单栏

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. linux基础之用户和组管理及权限

    一.用户和组管理 相关配置文件 /etc/passwd: 用户名 : 密码占位符 : UID : GID : COMMENTS : 家目录 :默认shell /etc/group: 组名 : 组密码占 ...

  9. codeforce 955c --Sad powers 思路+二分查找

    这一题的题意是   定义一个数,该数特点是为a的p次方 (a>0,p>1) 再给你n个询问,每个询问给出一个区间,求区间内该数的数目. 由于给出的询问数极大(10e5) 所以,容易想到应该 ...

  10. hdu 4277 USACO ORZ dfs+hash

    USACO ORZ Time Limit: 5000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Proble ...