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. 第九课-1 事件的状态Event 对象 ，事件，元素，节点的关系，事件委托currentTarget与target的区别

    <ul> <li>1itme1</li> <li>2itme2</li> <li>3itme3</li> <l ...

  2. MySQL复制(四)—多源(主)复制

    (一)多主复制概述 MySQL从5.7版本开启支持多主复制,所谓多主复制,是将多个主库的数据复制到一个从库中.通常用于数据仓库整合数据,比如OLTP系统为了分散业务压力,对数据库进行分库分表,当要对数 ...

  3. SpringMVC之Controller层最佳实践

    规范设置接口, 有利于项目的可扩展性,提高前后端的交互特性. 请求参数 响应结果

  4. 关于在osgearth 中 出现 arial.ttf : file not handled 的问题

    这是由于配置osg时 freetype 插件没有配置到位. 我个人的解决方法 打开CMAKE,点击advance,不勾选OSG_TEXT_USE_FONTCONFIG. 同时将freetype路径设置 ...

  5. 【TensorFlow】TensorFlow获取Variable值，将Variable保存为list数据

    Variable类型对象不能直接输出,因为当前对象只是一个定义. 获取Variable中的浮点数需要从数据流图获取: initial = tf.truncated_normal([3,3], stdd ...

  6. SpringBoot2.x操作缓存的新姿势

    一.介绍 spring cache 是spring3版本之后引入的一项技术,可以简化对于缓存层的操作,spring cache与springcloud stream类似,都是基于抽象层,可以任意切换其 ...

  7. 文件传输协议-FTP

    一.FTP概述 FTP(File Transfer Protocol 文件传输协议)C/S结构的应用层协议.由服务端和客户端两个部分共同实现文件传输功能 FTP服务器普遍部署于内网中,具有容易部署.方 ...

  8. Python socket 基础(Client) - Foundations of Python Socket

    Python socket 基础- Foundations of Python Socket 建立socket - establish socket import socket s = socket. ...

  9. SqlServer触发器的基础知识

    触发器的基础知识:create trigger tr_name on table/view{for | after | instead of } [update][,][insert][,][dele ...

  10. DeBug Python神级工具PySnooper

    安装 pip3 install pysnooper import pysnooper @pysnooper.snoop() def number_to_bits(number): if number: ...