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. (转载)intellj idea 如何设置类头注释和方法注释

    原文地址:http://www.cnblogs.com/wvqusrtg/p/5459327.html           intellj idea的强大之处就不多说了,相信每个用过它的人都会体会到, ...

  2. python列表常用内建方法

    python列表常用内建方法: abc = ['a',1,3,'a'] #abc.pop(1) #删除索引1的值.结果['a', 3] #abc.append([123]) #结果:['a', 1, ...

  3. UVA 11582 Colossal Fibonacci Numbers(数学)

    Colossal Fibonacci Numbers 想先说下最近的状态吧,已经考完试了,这个暑假也应该是最后刷题的暑假了,打完今年acm就应该会退了,但是还什么都不会呢? +_+ 所以这个暑假,一定 ...

  4. python_MySQL

    原文章连接:http://www.runoob.com/python/python-mysql.html 配置数据库 conn = mysql.connector.connect(user='root ...

  5. WinSDK(菜单笔记)

  6. Tomcat增加Context配置不带项目名访问导致启动的时候项目加载两次

    eclipse发布web应用至tomcat,默认方式下访问该项目是需要带项目名称的,例http://localhost:8080/myapp/.现在需要改成这样访问http://localhost.修 ...

  7. BIOS备忘录之EC常用知识点

    BIOS工程师眼中常用的EC知识点汇总: EC的硬件架构 EC硬件结构上主要分为两部分:Host Domain和EC Domain Host Domain就是通过LPC与CPU通信的部分(LPC部分需 ...

  8. openwrt修改hosts

    不同于标准linux主机,openwrt使用dnsmasq来管理dns和dhcp. 修改dnsmasq的配置文件 vi /etc/config/dhcp 在config dnsmasq这组下面添加 l ...

  9. [Python]基础教程（1）、介绍及环境搭建

    一.Python简介 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言,是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 是一种解释型语言: 这意味着开 ...

  10. Unity_3DText文字显示模糊怎么办

    在unity3d中创建一个3d text文字对象模型,但是发现默认情况下显示的文字很模糊,这种情况我们可以通过放大字体尺寸的方式解决这个问题,然后通过缩放的方式改变其大小. 1.打开unity3d场景 ...