getElementById() 根据id获取dom元素

没有找到则返会Null

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id="box"></div>

    <script>

        var box=document.getElementById("box");

        console.log(box);//<div id="box"></div>

        var boxs=document.getElementById("boxs");

        console.log(boxs);//null

    </script>

</body>

</html>

在不同的范围内查找dom元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="list">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

    <ol>

        <li>li</li>

        <li>li</li>

    </ol>

    <script>

        var ul=document.getElementById("list");

        var lis1=ul.getElementsByTagName("li");

        console.log(lis1.length);//5

        var lis2=document.getElementsByTagName("li");

        console.log(lis2.length);//7

    </script>

</body>

</html>

设置元素的css样式

ele.style.属性=属性值

如果是连字符形式的，需要转换为驼峰形式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="list">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

    <ol id="list2">

        <li>li</li>

        <li>li</li>

    </ol>

    <script>

        var ul=document.getElementById("list");

        ul.style.color="red";

        var ol=document.getElementById("list2");

        ol.style.fontWeight="bold";

    </script>

</body>

</html>

设置数组元素的样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ul id="list">

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

        <li>li</li>

    </ul>

    <ol id="list2">

        <li>li</li>

        <li>li</li>

    </ol>

    <script>

        var ul=document.getElementById("list");

        ul.style.color="red";

        var ol=document.getElementById("list2");

        var lis=ol.getElementsByTagName("li");

        lis[0].style.backgroundColor="pink";

        lis[1].style.backgroundColor="#abcdef";

    </script>

</body>

</html>

innerHTML 获取和设置元素的内容，包括html标签和文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <ol id="list2">

        <li>咪咪</li>

        <li>灰灰</li>

    </ol>

    <script>

        var ol=document.getElementById("list2");

        var lis=ol.getElementsByTagName("li");

        for(var i=0,len=lis.length;i<len;i++){

            lis[i].innerHTML+='~~~';

            console.log(lis[i].innerHTML);

        }

    </script>

</body>

</html>

className 设置和获取元素的类

设置的类会把原来的类替换掉

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .orange{color:orange;}

    </style>

</head>

<body>

    <ol id="list2">

        <li>咪咪</li>

        <li>灰灰</li>

    </ol>

    <script>

        var ol=document.getElementById("list2");

        var lis=ol.getElementsByTagName("li");

        lis[0].className="orange";

        console.log(lis[0].className);

    </script>

</body>

</html>

getAttribute() 获取属性

自定义属性建议都以 data- 开头

ele.属性名   直接获取属性（标签自带属性，除了class为className)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .orange{color:orange;}

    </style>

</head>

<body>

    <p id="p" class="pp" data-type="title"></p>

    <input id="text" type="text" name="text" value="hh" validate="true">

    <script>

        var p=document.getElementById("p");

        console.log(p.id);//p

        console.log(p.className);//pp

        console.log(p.getAttribute("data-type"));//title

        var text=document.getElementById("text");

        console.log(text.type);//text

        console.log(text.name);//text

        console.log(text.value);//hh

        console.log(text.getAttribute("validate"));//true

    </script>

</body>

</html>

setAttribute()   removeAttribute()  给dom元素设置和删除属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .orange{color:orange;}

    </style>

</head>

<body>

    <p id="p" class="pp" data-type="title"></p>

    <script>

        var p=document.getElementById("p");

        p.setAttribute("data-color","orange");

        console.log(p.getAttribute("data-color"));//orange

        p.removeAttribute("data-color");

        console.log(p.getAttribute("data-color"));//null

    </script>

</body>

</html>

javascript中DOM获取和设置元素的内容、样式及效果的更多相关文章

  1. js | javascript获取和设置元素的属性

    获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...

  2. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  3. js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  4. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  5. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  6. javascript中如何获取对象名

    javascript中如何获取对象名 一.总结 一句话总结:将对象传入参数,看参数是否为函数(js中的对象和函数是一个意思么(函数肯定是对象)),对象参数.name属性即可获得 //版本4 funct ...

  7. JQuery_DOM 简介/设置元素及内容

    一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...

  8. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  9. JavaScript：JavaScript中常见获取对象元素的方法

    介绍: javascript中常见的3种获取元素的方法,分别是通过元素ID.通过标签名字和通过类名字来获取 操作如下: 1.getElementById DOM提供了一个名为getElementByI ...

随机推荐

  1. 时序数据库 Apache-IoTDB 源码解析之文件格式简介（三）

    上一章聊到在车联网或物联网中对数据库的需求,以及 IoTDB 的整体架构,详情请见: 时序数据库 Apache-IoTDB 源码解析之系统架构(二) 打一波广告,欢迎大家访问IoTDB 仓库,求一波 ...

  2. 严重 [RMI TCP Connection(3)-127.0.0.1]

    学习Servlet时碰到的一个bug. Connected to server [2017-01-08 04:40:33,100] Artifact jspRun:war exploded: Arti ...

  3. GetWindowRect与GetClientRect 的区别

    GetWindowRect 函数功能:该函数返回指定窗口的边框矩形的尺寸.该尺寸以相对于屏幕坐标左上角的屏幕坐标给出. 函数原型:BOOL GetWindowRect(HWND hWnd,LPRECT ...

  4. Visual Studio 常见问题

    VS 2013相关问题 VS 2013 Ultimate Update 5 下载地址: 英文版: vs2013.5_ult_enu.iso SHA-1:918EA4A911858D32C9771480 ...

  5. re模块 findall()详解

    1. findall() 函数的2种表示形式 import re kk = re.compile(r'\d+') kk.findall('one1two2three3four4') #[1,2,3,4 ...

  6. 2018icpc南京网络赛-E AC Challenge(状压+dfs)

    题意: n道题,每道题有ai和bi,完成这道题需要先完成若干道题,完成这道题可以得到分数t*ai+bi,其中t是时间 1s, n<=20 思路: 由n的范围状压,状态最多1e6 然后dfs,注意 ...

  7. 【UEFI】--- 探究BIOS NvRam空间的的位置以及大小

    按照国际惯例--先上问题:1. 什么是NvRam空间,里面存储了什么数据 2. 如何找到NvRam空间在BIOS-bin文件中的位置 NvRam空间的学名为: Non-Volatile Ram即非易失 ...

  8. Private Variable and Private Method - Python 私有变量 和 私有方法

    Private Variable and Private Method Python 不象 Java 那样, 通过 private 关键字创建私有属性, python 通过更简洁的实现了'私有属性', ...

  9. css3 3d api

    perspective 人看东西的距离 perspective: 500; 越小3d效果越好 perspective-origin观察视点.此处默认为视图的中心点 transform-origin:2 ...

  10. MongoDB oplog 详解

    oplog 简介 oplog 是local库下的一个固定集合,Secondary就是通过查看Primary的oplog这个集合来进行复制的.每个节点都有oplog,记录从主节点复制过来的信息,这样每个 ...