js DOM(1)

最新推荐文章于 2022-07-07 19:33:36 发布
最新推荐文章于 2022-07-07 19:33:36 发布
阅读量154 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37243717/article/details/79481418
版权 
<!DOCTYPE html>
<!--
    一个完整的javaScript可以分为三个部分：
        ECMAScript(核心);
        DOM(文档对象模型); 是Document Object Model的一个简写
        BOM(浏览器对象模型);
    Document：可以理解为整个web加载的页面
    元素节点对象
 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
        <div id="box">这里是一个div标签</div>
        <h1>这里是一个h1标签</h1>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </body>
</html>

节点树图

这里写图片描述

获取元素节点对象的方法

<!DOCTYPE html>
<!--

    // document.getElementById("div1");
    // 页面文档  下面的  获取元素  通过  id名
    // 1：获取谁下面的元素
    // 2：通过什么方式来获取

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>

        <script type="text/javascript">

            window.onload = function(){

                //var oDiv = document.getElementById("div1");     //通过id名获取一个元素节点对象;


                // var oLi = document.getElementsByTagName("li");    //通过标签名来获取元素节点对象;
                // alert(oLi.length);
                // alert(oLi[0].innerHTML);       //oLi[0].innerHTML 获取对象的内容
                // alert(oLi[1].innerHTML);
                // alert(oLi[2].innerHTML);
                //alert(oLi instanceof Array);      //判断oLi是不是数组一个实例 打印false 说获取的oLi不是一个真正的数组，为一个伪数组


                //通过有指定名称的元素节点对象
                // var obj = document.getElementsByName("pp");
                // alert(obj.length);
                // alert(obj[0].innerHTML);
                // alert(obj[1].innerHTML);


//***********************************************************************************************************************

                //元素节点的属性
                // var oDiv = document.getElementById("div1");
                //innerHTML;   获取元素节点对象的内容
                //tagName;     获取元素节点对象的标签名
                // alert(oDiv.innerHTML);
                // alert(oDiv.tagName);


//***********************************************************************************************************************


                // var oDiv = document.getElementById("div1");
                //获取属性值;
                // alert(oDiv.id);
                // alert(oDiv.title);

                //设置属性值
                // oDiv.id = "box";         //id名不建议随便改动
                // oDiv.title = "小红";

                //添加属性
                // oDiv.an = "大家好";   //页面标签中不显示，但是这个属性是可以访问到的
                // alert(oDiv.an);


//***********************************************************************************************************************

                var oDiv = document.getElementById("div1");
                // setAttribute();  设置元素节点对象的属性   格式：setAttribute(属性名,属性值); 可以直接添加页面的标签中
                oDiv.setAttribute("an","大家好"); //setAttribute()设置的属性 要用getAttribute()方法来获取


                // getAttribute();   获取元素节点对象的属性值
                // var str = oDiv.getAttribute("an");
                // alert(str);


                // removeAttribute()  删除元素节点对象的属性
                oDiv.removeAttribute("an");
                var str = oDiv.getAttribute("an");
                alert(str);


//***********************************************************************************************************************


            }

        </script>

    </head>
    <body>

        <div id="div1" title="胖胖">我是一个div</div>

        <div name="pp">我也是一个div标签</div>
        <p name="pp">我是一个p标签</p>

        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>

    </body>
</html>

class属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
            .div1{
                background: red;
            }
            .div2{
                background: blue;
            }
        </style>

        <script type="text/javascript">

            window.onload = function(){

                var oDiv = document.getElementsByTagName("div")[0];
                //alert(oDiv.class);       //打印undefined
                //alert(oDiv.className);   //打印div1  获取class值用.className

                oDiv.className = "div2";
            }

        </script>
    </head>
    <body>
        <div class="div1">1111</div>
    </body>
</html>

样式操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">
            #div2{
                width: 150px;
                height: 100px;
                background: green;
            }
        </style>

        <script type="text/javascript">

             window.onload = function(){

                // var oDiv = document.getElementById("div1");

                //获取样式值
                // var an = oDiv.style.width;
                //alert(an);    //打印300px
                // alert(oDiv.style["width"]);

                // alert( oDiv.style.font-size );    //报错
                // alert( oDiv.style.fontSize );   //打印2em;
                //alert( oDiv.style["font-size"] )   //打印2en

//****************************************************************************************************

                //设置样式值
                // var oDiv = document.getElementById("div1");
                // oDiv.style.width = "500px";
                // oDiv.style.fontSize = "6em";

//****************************************************************************************************


                //获取style标签里的样式
                var oDiv2 = document.getElementById("div2");
                // alert( oDiv2.style.width );   //打印空白 没有获取到
                // alert( window.getComputedStyle(oDiv2,null).width );    //不兼容IE8    会报错
                // alert( oDiv2.currentStyle.width );                    //能兼容IE8   不兼容火狐与谷歌

                // alert(oDiv2.currentStyle);   //在火狐与谷歌在打印undefined 但不报错
                //兼容处理
                // if(oDiv2.currentStyle){
                //     alert(oDiv2.currentStyle.width);
                // }else{
                //     alert( window.getComputedStyle(oDiv2,null).width );
                // }


                //获取样式封装
                function getStyle(obj,attr){
                    if(obj.currentStyle){
                        return obj.currentStyle[attr];
                    }else{
                        return window.getComputedStyle(obj,null)[attr];
                    }
                }
                var str = getStyle(oDiv2,"backgroundColor");
                alert(str);

             }

        </script>

    </head>
    <body>

        <div id="div1" style="width:300px; height:200px; background:red; font-size:2em">123</div>

        <div id="div2">我是一个div</div>

    </body>
</html>

选项卡Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

            *{
                padding: 0px;
                margin: 0px;
            }
            #warp{
                width: 302px;
                height: 250px;
                border: 1px solid black;
                position: relative;
                margin: 100px auto;
            }
            #list li{
                list-style: none;
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                float: left;
                font-size: 1.2em;
                background: red;
                border-right: 1px solid black;
            }
            #list li:last-child{
                border : hidden;
            }
            #list .col{
                background: green;
            }

            #div1 div{
                width: 100%;
                height: 210px;
                background: #ccc;
                line-height: 210px;
                text-align: center;
                position: absolute;
                font-size: 2em;
                top: 40px;
                display: none;
            }

        </style>


        <script type="text/javascript">

            window.onload = function(){

                var oList = document.getElementById("list");
                var oLi = oList.getElementsByTagName("li");
                var obj = document.getElementById("div1");
                var oDiv = obj.getElementsByTagName("div");

                for(var i = 0; i < oLi.length; i++){

                    oLi[i].index = i;      //给每一个Li添加一个属性什么索引值；
                    oLi[i].onclick = function(){
                        //alert(this.index);
                        //alert(this.innerHTML);   //当前点击的对象
                        for(var j = 0; j < oLi.length; j++){
                            oDiv[j].style.display = "none";
                            oLi[j].className = "";
                        }
                        oDiv[this.index].style.display = "block";
                        this.className = "col";
                    }
                }

            }

        </script>


    </head>
    <body>

        <div id="warp">

            <ul id="list">
                <li class="col">java</li>
                <li>C++</li>
                <li>javaScript</li>
            </ul>

            <div id="div1">
                <div style="display:block">java......</div>
                <div>C++......</div>
                <div>javaScript......</div>
            </div>

        </div>

    </body>
</html>

Node节点属性

<!DOCTYPE html>
<!--

    Node对象
        在节点中有元素节点，属性节点，文本节点，
        节点对象有三个属性：nodeName, nodeType, nodeValue;

        元素节点    nodeName == 元素名  nodeType == 1  nodeValue == null

        属性节点    nodeName == 属性名  nodeType == 2  nodeValue == 属性值

        文本节点    nodeName == #text  nodeType == 3  nodeValue == 文本内容

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>

        <script type="text/javascript">

            window.onload = function(){

                //元素节点
                // var oDiv = document.getElementById("box");    //获取一个元素节点对象
                // alert(oDiv.nodeName);   //打印DIV;
                // alert(oDiv.nodeType);   //打印1;
                // alert(oDiv.nodeValue);  //打印null



                //文本节点;
                // var oDiv = document.getElementById("box");
                // var obj = oDiv.firstChild        //获取div下的第一个子节点
                // alert(obj);          //打印obj  获取到文本节点
                // alert(obj.nodeName);    //#text
                // alert(obj.nodeType);    //打印3
                // alert(obj.nodeValue);   //打印文本内容



                //属性节点
                // var oDiv = document.getElementById("box");
                // var arr = oDiv.attributes;    //获取属性节点集
                // alert(arr[0].nodeName);    //打印id
                // alert(arr[0].nodeType);    //打印2
                // alert(arr[0].nodeValue);   //打印box


            }
        </script>

    </head>
    <body>

        <div id="box" title="胖胖">我是一个div</div>

    </body>
</html>

firstChild与lastChild属性

<!DOCTYPE html>
<!--

    firstChild 获取第一个子节点
    lastChild  获取最后一个子节点

 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <title>Examples</title>
        <style type="text/css">

        </style>

        <script type="text/javascript">

            window.onload = function(){

                var oUl = document.getElementById("list");
                // var obj = oUl.firstChild;         //获取第一个节点对象，在ie8以下获取到的是第一个元素节点对象
                var obj = oUl.firstElementChild;     //获取第一个元素节点对象，但是在ie8以下得到的值是undefined，但不报错；
                // alert(oUl.firstElementChild);     //打印undefined

                //兼容处理
                var obj = oUl.firstElementChild || oUl.firstChild;
                alert(obj.nodeType);
                alert(obj.innerHTML);


                //lastChild属性与firstChild
            }
        </script>

    </head>
    <body>

        <ul id="list">
            <li>我是第1个Li标签</li>
            <li>我是第2个Li标签</li>
            <li>我是第3个Li标签</li>
            <li>我是第4个Li标签</li>
            <li>我是第5个Li标签</li>
        </ul>

    </body>
</html>
Casablanca_jhBi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
node.js实战之使用 jsdom
蛐蛐的博客
10-05 1954
jsdom 是许多 web 标准的纯 JavaScript 实现，特别是 WHATWG DOM和HTML标准。该项目的目标是模拟足够多的 Web 浏览器子集，以用于测试和抓取真实世界的 Web 应用程序。最新版本的 jsdom 需要 Node.js v14 或更高版本。
虚拟浏览器 JSDOM 学习笔记
软件哲学
09-24 3386
这篇文章只是个人学习笔记，所以结构不清，信息不全，建议阅读原版项目手册。   JSDOM 是用nodejs实现的用于测试的虚拟浏览器。 基本例子 const dom = new JSDOM(``, { url: "https://example.org/", referrer: "https://example.com/", contentType: "text/html",...
JavaScript 中的DOM1
weixin_34342992的博客
07-18 100
DOM 文档对象模型 文档对象模型：定义 为了能够让程序(js)去操作页面中的元素 节点层次 节点之间的关系构成了节点层次，html 页面的可以画出一个以html标签为根节点的树形结构DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点） <html lang="en"> <head> ...
js-DOM1
Vinsmoker_Sanji的博客
09-10 116
导读一：什么是DOM DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构 导读二：DOM树 1.DOM树把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。 文档：一个页面就是一个文档，DOM中使用document表示。 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示 2.根
DOM0, DOM1, DOM2, DOM3
pxy_lele的专栏
11-10 3796
----------------------摘抄自他人笔记(http://itbilu.com/javascript/js/Vyxodm_1g.html)，感谢分享---------------------- JavaScript历经了从被人误解到现在的被万众瞩目的转变。随着一些JavaScript编程规范的推出（如：AMD、CMD），其应用范围也从前端一些小功能逐渐扩展到后端和一些大项目中
关于DOM级别的一些问题
C860_zy的专栏
03-11 845
原文地址：http://blog.segmentfault.com/gothic/1190000000366311 之前看书没太注意这个问题，直到我今天看书看到一个DOM0级，于是我就在群里问了下各个级别的意思区别.. 首先我们的确定标准了是没有DOM0级的。在平时阅读的时候可能会读到DOM0级(DOM Level0)的字眼。实际上，DOM0级标准是不存在的，所谓的DOM0级是DOM历史坐
JavaScript之DOM
qq_43751200的博客
06-05 1752
DOM
JavaScript DOM操作
好好学习天天向上
03-27 5115
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JS 之 DOM详解
玄鱼殇
07-07 7422
dom操作博大精深，源远流长～
JavaScript中 DOM 的概念解释
norang的博客
06-04 1859
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
JavaScript DOM操作 示例代码
06-25
包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含dom的查询、访问、修改、添加、替换、删除等操作包含...
JavaScript-DOM:JS学习者使用JavaScript DOM的最小项目
04-27
本项目“JavaScript-DOM: JS学习者使用JavaScript DOM的最小项目”旨在帮助初学者理解并实践DOM操作的基本技巧。 在JavaScript中，DOM被作为一个对象模型，我们可以创建、修改、删除页面上的任何元素，从而实现动态...
JS DOM snippet插件1
08-08
总的来说，JS DOM snippet插件1提供了一套强大的工具，帮助开发者更高效地与HTML文档交互，简化了JavaScript中的DOM操作，促进了更高效、更规范的编码实践。熟悉并熟练使用这些快捷键，将极大地提高前端开发的工作...
JavaScript dom操作 dom元素查询 示例代码
最新发布
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
html5 js 读取csv文件
热门推荐
Casablanca
04-06 1万+
//读取文件 function readParseFiles(callback) { var data = []; var files = []; files.push(document.getElementById('file0').files[0], document.getElementById('fil...
js 操作元素属性、操作元素样式、display(none、block)
Casablanca
03-09 1万+
js操作元素属性 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Keywords" content="关键字,关键词"&gt; &lt;meta name=
js读取xlsx文件成数组
Casablanca
04-08 3561
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;script src="jquery-2.2.1.min.js" type="text/javascript"&gt;&lt;/script&am
d3.js 解析csv文件
Casablanca
03-07 3342
var dataset = []; d3.csv("sample.csv", function(data) { dataset = data.map(function(d) { return [ d["Title"], d["Category"], d["ASIN/ISBN"], d["Item Total"] ]; }); console.log(dataset[0]...
JavaScript DOM 高级编程指南
1. **DOM基础**：理解DOM模型，包括节点类型（元素节点、文本节点、属性节点等）、节点关系（父节点、子节点、兄弟节点）以及如何遍历DOM树。 2. **选择和访问元素**：使用`getElementById`、`getElementsByTagname...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值