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. 曹工说Spring Boot源码（15）-- Spring从xml文件里到底得到了什么（context：load-time-weaver 完整解析）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  2. 网络收发与Nginx事件间的对应关系

    主机A可以想象是家里面的一台笔记本,也就是客户端,主机B可以想象成服务器上跑着nginx 主机A发送一个http的get请求到主机B经历了哪些请求. 在数据流: 应用层发送了一个get请求,传输层中, ...

  3. python笔记19

    今日内容 面向对象基本用法 好处和应用场景 面向对象的三大特性 内容详细 1.面向对象基本格式 # ###### 定义类 ###### class 类名: def 方法名(self,name): pr ...

  4. POJ_1042_贪心

    题目描述: 每组数据给你n个胡,h小时时间,每个湖一次可钓鱼数量,每个湖每次钓鱼后下次可钓鱼数量的减少量,从每个湖到下一个湖所需时间.求最大钓鱼量. 要注意的是,刚开始在第一个湖,每次移动只能往下一个 ...

  5. 林大妈的JavaScript进阶知识（二）：JS异步行为

    JavaScript 是单线程执行的 JavaScript运行在浏览器中.浏览器是多线程的,但只分配了其中一条给JavaScript,作为它的主线程.对于编码者来说,JavaScript是单线程的.因 ...

  6. 题解【[AHOI2013]作业】

    \[ \texttt{Preface} \] 数据貌似很水,据说 \(A_i\leq n\) ,连离散化都不需要. 不知道为啥设块大小为 \(\frac{n}{\sqrt m}\) 会一直 Runti ...

  7. shellcode 反汇编，模拟运行以及调试方法

    onlinedisassembler https://onlinedisassembler.com 在线反汇编工具,类似于lda.功能比较单一. Any.run 等平台在线分析 将shellcode保 ...

  8. 全网一定不是最好懂的C++线性筛素数

    Part 0:概念 先给几个概念(很重要): 合数:如果\(xy=z\text{且}x,y\text{为正整数}\),我们就说\(x,y\text{是}z\text{的合数}\) 素数:如果数\(a\ ...

  9. Android View的绘制机制前世今生---前世

    就像上个文章说的,触摸事件的传递机制是从外层到内层的过程. 我们想来看看这个页面里面的层级关系: 以下我们就用what-how-why三部曲的方式来分析View的绘制过程. 由于篇幅很大,所以分几篇来 ...

  10. 并发编程之Master-Worker模式

    我们知道,单个线程计算是串行的,只有等上一个任务结束之后,才能执行下一个任务,所以执行效率是比较低的. 那么,如果用多线程执行任务,就可以在单位时间内执行更多的任务,而Master-Worker就是多 ...