javascript基础：dom

Dom:

　　*　概念：Document Object Model 文档对象模型

　　　　*　将标记语言文档的各个组成部分，封装成对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作

　　　　* Dom将HTML文档表达成树结构

　　*　W3C Dom 标准被分为 3 个不同的部分:

　　　　* 核心 Dom - 针对任何结构化文档的标准模型

　　　　　　* Document：文档对象

　　　　　　* Element：元素对象

　　　　　　* Attribute：属性对象

　　　　　　* Text：文本对象

　　　　　　* Comment：注释对象

--------------------------------------------------------------------

　　　　　　* Node：节点对象，其他5个的父对象

　　　　* XML Dom - 针对 XML 文档的标准模型

　　　　* HTML Dom - 针对 HTML 文档的标准模型

一、核心DOM模型：

　　* Document：文档对象

　　　　1、创建（获取）：在html dom模型中可以使用window对象获取

　　　　　　1、window.document

　　　　　　2、document

　　　　2、方法：

　　　　　　1、获取Element对象：

　　　　　　　　1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一

　　　　　　　　2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组

　　　　　　　　3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组

　　　　　　　　4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组

    <div id="div1">div1</div>

    <div id="div2">div2</div>

    <div id="div3">div3</div>

    <div class="cls4">div4</div>

    <div class="cls5">div5</div>

    <input type="text" name="username">

    <script>

        //1、getElementById()：根据id属性值来获取元素对象，id属性值一般唯一

        var div = document.getElementById("div1")

        //2、getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组

        var divs = document.getElementsByTagName("div")

        // alert(divs.length)

        //3、getElementsByClassName()：根据Class属性值获取元素对象们，返回值是一个数组

        var div_cls =  document.getElementsByClassName("cls5")

        alert(div_cls.length)

        //4、getElementsByName()：根据name属性值来获取元素对象们，返回值是一个数组

        var ele_username = document.getElementsByName("username")

        alert(ele_username.length)

    </script>

　　　　　　2、创建其他DOM对象：

　　　　　　　　* createAttribute(name)　

　　　　　　　　* createComment()

　　　　　　　　* createElement()

　　　　　　　　* createTextNode()　　　　　　　　　　　　　　　　

　　　　3、属性：

　　* Element：元素对象

　　　　　1、获取/创建：通过document来获取和创建

　　　　　2、方法：

　　　　　　　　1、removeAttribute()：删除属性

　　　　　　　　2、setAttribute()：设置属性

    <a>点我点我</a>

    <input type="button" value="设置属性" id="btn_set">

    <input type="button" value="删除属性" id="btn_remove">

    <script>

        //获取btn

        var btn_set = document.getElementById("btn_set");

        btn_set.onclick = function () {

            //1.获取a标签

            var element_a = document.getElementsByTagName("a")[];

            element_a.setAttribute("href", "https://www.baidu.com")

        }

         //获取btn

        var btn_remove = document.getElementById("btn_remove");

        btn_remove.onclick = function () {

            //1.获取a标签

            var element_a = document.getElementsByTagName("a")[];

            element_a.removeAttribute("href", "https://www.baidu.com")

        }

    　　</script>

　　* Node：节点对象，其他5个的父对象（节点对象代表文档数中的一个节点）

　　　　* 特点：所有dom对象都可以被认为是一个节点

　　　　* 方法：

　　　　　　* CRUD dom数：

　　　　　　　　* appendChild()：向节点的子节点列表的结尾添加新的子节点

　　　　　　　　* removeChild()：删除（并返回）当前节点的指定子节点

　　　　　　　　* replaceChild()：用新节点替换一个子节点

　　　　* 属性：

　　　　　　* parentNode 返回节点的父节点

    <style>

        div{

            border: 1px solid black;

        }

        #div1{

            width: 200px;

            height: 200px;

        }

        #div2{

            width: 100px;

            height: 100px;

        }

        #div2{

            width: 50px;

            height: 50px;

        }

    </style>

</head>

<body>

    <div id="div1">

        <div id="div2">div2</div>

       div1

    </div>

    <a href="javascript:void(0)" id="del">删除子节点</a>

    <a href="javascript:void(0)" id="add">添加子节点</a>

    <!-- <input type="button" value="删除子节点" id="del"> -->

    <script>

        //1、获取超链接

        var element_a = document.getElementById("del");

        //2、绑定单击事件

        element_a.onclick = function(){

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

            var div2 = document.getElementById("div2");

            div1.removeChild(div2)

        }

        /*

            超链接功能：

                1、可以被点击：样式

                2、点击后跳转href指定的url

            需求：保留1功能，去掉2功能

                实现：href="javascript:void(0)"

        */

         //1、获取超链接

         var element_add = document.getElementById("add");

        //2、绑定单击事件

        element_add.onclick = function(){

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

            //给div1添加子节点

            //创建div节点

            var div3 = document.createElement("div");

            div3.setAttribute("id","div3");

            div1.appendChild(div3);

        }

        var div2 = document.getElementById("div2")

        var div1 = div2.parentNode

        alert(div1)

    </script>

</body>

二、HTML DOM

　　1、标签体的设置和获取：innerHTML

　　2、使用html元素对象的属性

　　3、控制样式

　　　　1、使用元素的style属性来设置，如：

    <div id="div1">

        div

    </div>

    <script>

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

        div1.onclick = function(){

            //修改样式方式1

            div1.style.border = "1px solid red";

            div1.style.width = "200px";

            //font-size --> fontSize

            div1.style.fontSize = "20px";

        }

    </script>

　　　　2、提前定义好类选择器的样式，通过元素的className属性来设置class属性值

        //修改方式2

        //className

        var div2 = document.getElementById("div2");

        div2.onclick = function(){

            div2.className = "d2"

        }

javascript基础：dom的更多相关文章

JavaScript基础—dom,事件
Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...
JavaScript基础 -- DOM
一.DOM全称文档对象模型(Document Object Model) 二.DOM是什么 DOM可以说是制作动态页面的强有力工具.DOM不是JavaScript语言的一部分,而是内置在浏览器中的一 ...
JavaScript基础--DOM对象（十三）:（windows对象：history\location\navigator\screen\event）
DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象 ...
Javaweb学习笔记——（三）——————JavaScript基础&DOM基础
day031.js的String对象 **创建String对象 ***var str = "abc"; **方法和属性(文档) ***属性 lenth:字符串的长度 ***方法 ( ...
JavaScript基础--DOM对象加强篇（十四）
1.document 对象定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 ...
JavaScript基础DOM介绍和常用操作（5）
day53 参考:https://www.cnblogs.com/liwenzhou/p/8011504.html JavaScript引入方式 location对象 window.location ...
JavaScript基础 DOM的操作
1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作一.属性和方法: window对象——浏览器 ...
javascript基础DOM操作
DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以 ...
javascript基础-DOM原理
解释清楚DOM原理并不是一件容易的事,但是任何一个前端工程师,都必须牢牢掌握它. DOM整体架构: 图解: DOM,即针对XML文档的应用程序编程接口(API).通俗一点说,HTML属于XML的一种, ...
从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM
1:DOM(Document Object Model)的概念和作用 document对象是DOM核心对象:对html中的内容,属性,样式进行操作. 节点树中节点之间的关系:父子,兄弟. 2:DO ...

随机推荐

批量更新mysql表数据
1.批量更新表中某个字段,如果表比较大,每条记录都执行一条update,1s执行10条数据,10万条数据就要1W秒,3个多小时. 2.可以用case when 来实现,模板如下 UPDATE cate ...
关于tomcat配置了虚拟路径，但是在Idea中无法生效的问题
1. 确认 tomcat 的server.xml 文件中配置的虚拟路径是否正确其中,path表示访问的虚拟路径,docBase表示真实路径 2. Idea 服务器配置中是否勾选 “Deploy ap ...
【bzoj 2870】最长道路tree
题目边分治边分和点分相比就是找到一条重心边,考虑所有经过这条边的路径,之后断开这条边分成两个联通块,继续分治由于每次分治重心是一条边,所以只会产生两个联通块,考虑两个联通块显然要比像点分那样考虑 ...
POJ 2318 /// 判断点与直线的位置关系
题目大意: n块玩具箱隔板 m个玩具落地点给定玩具箱的左上和右下两个端点接下来给定n块隔板的上点的x和下点的x(因为y就是玩具箱的上下边缘) 接下来给定m个玩具落地点输出n+1个区域各有的玩具数 ...
POJ 3376 Finding Palindromes EX-KMP+字典树
题意: 给你n个串串,每个串串可以选择和n个字符串拼接(可以自己和自己拼接),问有多少个拼接后的字符串是回文. 所有的串串长度不超过2e6: 题解: 这题由于是在POJ上,所以string也用不了,会 ...
基于jdk8的格式化时间方法
背景 jdk8之前,java使用Date表示时间,在做时间的格式化时,通常使用SimpleDateFormat,但是SimpleDateFormat是非线程安全的,在写代码时通常要将之定义为局部变量或 ...
IDA 远程调试设置
第一步,先去 IDA dbgsrv 这个目录下,找到要调试的那个远程计算机对应的可用客户端, 比如,android_server, 把它拷贝到目标计算机中, 比如 adb push .... 然 ...
iOS逆向系列-Cycript
概述 Cycript 是Objective-C++.ES(JavaScript).Java等语法的混合物. 可以用来探索.修改.调试正在运行的Mac\iOS App. 通过Cydia安装Cycript ...
nodejs vue-cli 微信公众号开发（一）申请域名搭建服务器
一.搭建本地服务器 1.首先保存本地的80端口被node监听,利用内网穿透工具把80端口映射出去.(ngrok工具可以穿透内网使本地ip作为外网使用) 2.打开https://natapp.cn/tu ...
gnome-tweak-tool设置gnome参数, 修改CENTOS7桌面图标大小
GNOME Tweak Tool 是 GNOME 3 的优化配置工具,为我们带来 GNOME Shell 扩展安装功能,方便Linux用户对 Gnome Shell 进行一些调整. 主要功能有:安装, ...

javascript基础：dom

javascript基础：dom的更多相关文章

随机推荐

热门专题