JS学习笔记(02)——节点对象

最新推荐文章于 2021-01-09 01:41:45 发布
最新推荐文章于 2021-01-09 01:41:45 发布
阅读量1k 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014630801/article/details/49191921
版权

window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script>
        // window.alert('haha');
        // window.confirm('确定吗？');

        console.log(window.navigator.cookieEnabled);

        console.log(window.location);
        // window.location.href = 'http://www.google.fr';

    </script>
</head>
<body>

</body>
</html> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script>
        console.log(window.history);
        console.log(window.screen.width);
        console.log(window.screen.height);
        alert(window.document);
    </script>
</head>
<body>
    <input type="button" value="前进" onclick="javascript:window.history.forward()">
    <input type="button" value="后退" onclick="javascript:window.history.back()">

</body>
</html>

加不加var

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01</title>
    <script>
    window.str = 'union';

    function t1(){
        // var str = 'china';

        function t2(){
            // var str = 'Japan';
            str = 'Japan'; //不加var，赋值过程，加var，声明一个局部变量
            alert(str);
        }
        t2();
    }

    t1();
    </script>
</head>
<body>
</body>
</html>

JS读取改变对象属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div{
        width: 300px;
        height: 300px;
    }

    #test1{
        background: green;
    }

    #test2{
        background: red;
    }

    </style>
    <script>
    function ch(){
        var div = document.getElementById('test1');
        div.id = 'test2';
    }

    </script>
</head>
<body>
    <h1>特效是什么</h1>
    <div id="test1" onclick="ch();"></div>

</body>
</html>

找对象

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <h1>关键是找对象</h1>
    <div id = "test1">
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
    </div>
    <div class = "test2">class test2</div>
    <input type="text" name="username" id = "" value= "poly">
</body>
<script >
    //用id来查询，返回值是对象
    console.log(document.getElementById('test1'));

    //用标签来查询，返回值是对象的集合,即使只找到一个对象，也包装成集合(数组)返回
    ps = document.getElementsByTagName('p');
    ps[1].style.background = 'green';

    //对于扁担元素可以用name来查询,返回值是对象集合
    alert(document.getElementsByName('username')[0].value);
    document.getElementsByName('username')[0].value = 'lucy';

    //按照类名查找，返回对象集合
    document.getElementsByClassName('test2')[0].style.background = 'gray';

    //找子节点
    alert(document.getElementById('test1').childNodes.length);  //空白符，换行都看成一个节点
    alert(document.getElementById('test1').children.length); //children非标准属性，但兼容很好，他不包含空白节点

    document.getElementsByTagName('p')[2].parentNode.style.border='1px solid';

</script>
</html>

注意：
1.在<div class="main">中操作class属性用divobj.classname。
2.如果css属性带有横线，如border-top-style，则把横线去除，并把横线后面的首字母大写。
3.放在标签里的style的css属性才能被找到。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .test1{
            background: green;
        }
        .test2{
            background: red;
        }

    </style>
</head>
<body>
    <div class="test1" onclick='t();' style="width: 300px;height: 300px;border-bottom: 1px solid;">
        点击div，使其背景色红绿交替
        宽高增加5px
        下边框增粗1px；
    </div>
</body>
<script>
    function t(){
        var div = document.getElementsByTagName('div')[0];
        if(div.className.indexOf('test1') >= 0 ){
            div.className = 'test2';
        } else {
            div.className = 'test1';
        }

        div.style.width = parseInt(div.style.width) + 5 +'px';
        div.style.height = parseInt(div.style.height) + 5 +'px';
        div.style.borderBottomWidth = parseInt(div.style.borderBottomWidth) + 1 +'px' ;
    }
</script>
</html>

通过函数读取当前的style

此种方法可以取得<style></style>中的css属性。
window.getComputedStyle(obj, 伪元素)
参数说明：
第一个参数为要获取计算后的样式的目标元素
第二个参数为期望的伪元素，如’after’等，一般设为null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            border-bottom: 1px solid black;
        }
        .test1{
            background: green;
        }
        .test2{
            background: red;
        }

    </style>
</head>
<body>
    <div class="test1" onclick="t(); ">
        点击div，使其背景色红绿交替
        宽高增加5px
        下边框增粗1px；
    </div>
</body>
<script>
    function getStyle(obj , attr){
        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj , null)[attr]; // 这两个对象是只读，要想改还是得通过obj.style
    }

    function t(){
        var div = document.getElementsByTagName('div')[0];
        if(div.className.indexOf('test1') >= 0 ){
            div.className = 'test2';
        } else {
            div.className = 'test1';
        }

        // alert(getStyle(div, 'width'));

        // return;  
        div.style.width = parseInt(getStyle(div, 'width')) + 5 +'px';
        div.style.height = parseInt(getStyle(div, 'height')) + 5 +'px';
        div.style.borderBottomWidth = parseInt(getStyle(div, 'borderBottomWidth')) + 1 +'px' ;
    }
</script>
</html>

删除对象

步骤：
1.找到对象
2.找到他的父对象parentObj
3.parentOb.removechild（子对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function del(){   //可以在此处放script，因为一般都在页面加载完之后才会去点
            var lis = document.getElementsByTagName('li');
            var lastli = lis[lis.length-1];
            lastli.parentNode.removeChild(lastli);
        }
    </script>
</head>
<body>
    <input type="button" value="删除最后一个li" onclick = "del();">
    <ul>
        <li>春</li>
        <li>夏</li>
        <li>秋</li>
        <li>冬</li>
    </ul>
</body>
</html>

创建对象

步骤：
1.创建对象
2.找到父对象parent.Obj
3.parentObj.addChild(对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function add(){ 
            var li = document.createElement('li');
            var txt = document.createTextNode('冬');
            li.appendChild(txt); // 把文本节点写进li节点里
            document.getElementsByTagName('ul')[0].appendChild(li);
        }
    </script>
</head>
<body>
    <h1>创建节点</h1>
    <input type="button" value="增加" onclick = "add();">
    <ul>
        <li>春</li>
        <li>夏</li>
        <li>秋</li>
    </ul>
</body>
</html>

暴力操作节点

innerHTML：代表节点内的内容，能读能写
不是一个w3c规定的标准，但各浏览器支持的很好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

</head>
<body>
    <h1>创建节点</h1>
    <input type="button" value="添加春夏秋" onclick = "add3();">
    <input type="button" value="添加冬" onclick = "add2();">
    <ul>
    </ul>
    <script>
        function add3(){ 
            var ul = document.getElementsByTagName('ul')[0];
            ul.innerHTML = '<li>春</li><li>夏</li><li>秋</li>';
        }

        function add2(){
            var ul = document.getElementsByTagName('ul')[0];
            // alert(ul.innerHTML);
            ul.innerHTML += '<li>冬</li>';
        }
    </script>
</body>
</html>
偶是大禹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS学习笔记——对象
lxy95512的博客
02-16 346
在JavaScript中,对象是一组无序的相关属性和方法的集合 ,所有的事物都是对象,例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。 属性:事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词) 创建对象的三种方式 在JavaScript中,现阶段我们可以采用三种方式创建对象( object) : 利用字面量创建对象 利用new Object创建对象 利用构造函数创建对象 利用字面量创建对象 对象字面量:就是花括号{}里面包含了表达
开发笔记
02-15
【开发笔记——构建GatsbyJS博客与SCSS深入理解】 在现代Web开发中，静态站点生成器（Static Site Generators, SSG）如GatsbyJS，因其高效、快速且易于维护的特点，越来越受到开发者们的青睐。GatsbyJS是基于React...
JS和JQuery操作的节点对象的转化和基本使用
u010028461的专栏
04-10 1625
JavaScript(BOM+DOM+ECMAScript)--JavaScript是一种弱类型语言，即在运行时才检查数据类型和语法。--js也分为基本数据类型和引用数据类型{重要的方法： parseInt（a）；//a转化为整形 parseFloat（b）；//b转化为浮点型两个调试常用的方法： console.log(); alert();关于判断两个变量相当的注意事项： ==：比较时会进行类...
节点对象转节点_节点流对象的可能
weixin_26748899的博客
10-12 326
节点对象转节点In many cases, where we have little flow of information, a simple request to obtain it is enough. But when we have large volumes of data and perhaps with several sources, the use of streams is ...
js节点对象与jQuery节点对象之间的转换
七十多岁的人了、
01-09 747
js节点对象与jQuery节点对象之间的转换
3.3 系统内部对象 —— DOM节点对象
SuperBetterMan的博客
06-15 432
HTML DOM节点树 HTML DOM定义了访问和操作HTML文档的标准方法。DOM将HTML文档表达为树结构。具体示例如下： <html> <head> <title>文档标题</title> </head> <body> <a href=“#">我的链接</a> <h1>我的标题</h1>
节点对象转节点_节点流程对象说明
cumi7754的博客
08-15 441
节点对象转节点The process object in Node.js is a global object that can be accessed inside any module without requiring it. There are very few global objects or properties provided in Node.js and process is ...
Cocos2d-x学习笔记——完全掌握C++ API与游戏项目开发.zip
06-28
本学习笔记旨在帮助开发者全面掌握Cocos2d-x的C++ API以及游戏项目的开发流程。 一、Cocos2d-x框架基础 Cocos2d-x是Cocos2d-x系列的C++版本，它提供了丰富的图形绘制、动画制作、音频播放、物理引擎等功能。Cocos2d...
jQuery节点分布圆形循环信息展示代码.zip
最新发布
09-22
4. `js`：可能包含了一些辅助JavaScript文件，如jQuery插件或者与项目功能相关的JavaScript代码。 在jQuery中实现这样的效果，一般会涉及到以下几个关键技术点： 1. **选择器与DOM操作**：jQuery提供了一系列高效...
jsmind-master_js_
10-03
**JavaScript思维导图库——jsMind详解** 在IT行业中，数据可视化是不可或缺的一部分，而思维导图作为一种有效的信息展示方式，被广泛应用于项目规划、学习笔记、问题分析等多个领域。`jsMind` 是一个基于 ...
js脑图思维导图插件.zip
07-02
它可以帮助我们清晰地梳理思路，提高工作效率，尤其是在项目管理、学习笔记、问题解决等方面。今天我们要介绍的是一款基于JavaScript的开源思维导图插件——JSMind，它为Web应用提供了强大而灵活的思维导图功能。 ...
vue3+ts (源码+笔记+生命周期截图)
02-14
TypeScript（简称TS）是一种强类型、静态类型的编程语言，它扩展了 JavaScript，增加了对类、接口和其他高级特性的支持，使得代码更易于维护和协作。Vue3 结合 TypeScript，为开发者提供了更强大的类型检查和更好的...
vocabulary_note
04-16
【标题】: "词汇笔记——JavaScript中的数据结构：链表" 【正文】 在这个名为"vocabulary_note"的压缩包文件中，我们可以看到一个专注于个人学习的笔记本内容，特别是在2021年4月14日，重点研究了数据结构，特别是...
DOM_studies:从大胆的课程工作，也许还有其他资源。
05-02
在本文中，我们将深入探讨DOM（Document Object Model）——一个与JavaScript紧密相关的概念，它是网页内容的结构化表示。DOM是HTML和XML文档的编程接口，允许我们通过JavaScript对网页内容进行动态操作。这个"DOM_...
pattern-language-cards
04-30
综合以上信息，我们可以推测这个项目是一个关于JavaScript编程的资源集合，可能包含一系列设计模式的解释、APL编程语言的学习笔记，以及可能与Node.js相关的实践示例。其中，设计模式部分可能通过卡片形式呈现，便于...
jQuery对象与DOM节点转换
ty13438189519的博客
06-23 1532
jQuery内部确实定义一些与原生数组方法类似的方法，例如：.sort()，.push()，.splice()都是jQuery()对象的方法。不过，这些方法都是内部使用的，并没有文档公开出来。不能在jQuery对象上调用他们，若要使用他们，可以利用.get()方法将jQuery对象转换为DOM节点 例如：var rows=$(‘tbody>tr’).get(); rows
JavaScript(JS)的DOM对象(JS的Document对象)----什么是DOM对象?
No8g攻城狮的博客
04-02 6934
1、概念： Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作。 通过 HTML DOM（如图所示），可访问 JavaScript HTML 文档的所有元素。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被...
节点对象
chiniue1759的博客
11-13 169
网页中的 一切内容都是DOM节点对象 节点对象有共同类型，叫 Node Node当中提共了三大属性：第一个 node.nodeType: 值啊 是一个数字，nodeType表示这个节点的类型。 何时使用：区分节点的类型的时候，或者判断节点类型时候。 如何使用： documen...
节点对象的方法和属性
weixin_44540178的博客
05-27 799
开发工具与关键技术：HTML DOM节点方法 作者：Li Mingrun 撰写时间：2019年5月27日 在之前的文章中有提过HTML DOM文档对象模型，其中是对节点的介绍。 在HTML文档中的而全部内容都属于节点。 例如： 1，整个文档是一个文档节点 2，每个 HTML 元素是元素节点 3，HTML 元素内的文本是文本节点 4，每个 HTML 属性是属性节点 5，注释是注释节点 HT...
【K210】K210学习笔记五——串口通信
09-11
下面是有关 K210 学习笔记五中串口通信的一些内容： 在 K210 开发板上，串口是一种常见的通信接口，用于将数据从一个设备传输到另一个设备。串口通信通常使用 UART (Universal Asynchronous Receiver/Transmitter) ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值