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. 用TreeWalk提高网速及其在vista中的安装方法

    本文中所需的软件请到http://download.csdn.net/source/738436下载.     有时候,我们发现可以上的去QQ,上的去飞信,但是却打不开网页,我通过GOOGLE的搜索发 ...

  2. eclipse运行python 安装pydev 版本匹配问题

    Eclipse 4.5, Java 8: PyDev 5.2.0 PyDev 5.2.0 版本路径:https://dl.bintray.com/fabioz/pydev/5.2.0 1.安装时注意: ...

  3. android studio闪退的原因

    可能是因为某个监听的问题,比如没有把Mainacticity中定义的button和布局文件中的按钮控件关联起来,就会出现这个问题

  4. MBMD（MobileNet-based tracking by detection algorithm）作者答疑

    If you fail to install and run this tracker, please email me (zhangyunhua@mail.dlut.edu.cn) Introduc ...

  5. RFC笔记—Neighbor Discovery for IP version 6 (IPv6)

    Router Solicitation Message Source Address An IP address assigned to the sending interface, or the u ...

  6. tomcat 日志

    1.Tomcat的日志(./tomca/logs/) 分为5类,这里面 1和5比较重要 .catalina.--.log 或者 catalina.out: 引擎的日志文件 .host-manager. ...

  7. Django 系列

    Django基础 Django框架简介 Django 静态文件 Django request对象与ORM简介 Django路由系统 Django之视图层 Django之模板层 Django的setti ...

  8. java设计模式学习笔记——里氏替换原则

    oo中的继承性的思考和说明 1.继承包含这样一层含义:父类中凡是已经实现好的方法,实际上是在设定规范和契约,虽然它不强制要求所有的子类必须遵循这些七月,但是如果子类对这些已经实现的方法任意修改,就会对 ...

  9. GitLab Runner

    GitLab Runner是一个开源项目,用于运行你的作业(jobs)并将结果发送回GitLab.它与GitLab CI结合使用,GitLab CI是GitLab用于协调jobs的开源持续集成服务. ...

  10. Java之GUI编程

    GUI编程 组建 窗口 弹窗 面板 文本框 列表框 按钮 图片 监听事件 鼠标 键盘事件 破解工具 1.简介 GUI的核心技术:Swing AWT 为什么不流行? 界面不美观. 需要jre环境.(没必 ...