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 ...

随机推荐

vue项目打包后资源相对引用路径的和背景图片路径问题
vue项目中若要使用相对路径来获得相应静态资源,需要修改以下内容来确保项目打包后能正常运行. 1.修改config => index.js => build => assetsPub ...
Ifconfig- Linux必学的60个命令
1.作用 ifconfig用于查看和更改网络接口的地址和参数,包括IP地址.网络掩码.广播地址,使用权限是超级用户. 2.格式 ifconfig -interface [options] addres ...
Android开发 LevelListDrawable详解
前言此篇博客正在施工中... 作者其实就是想挖个坑备忘一下... 十分抱歉, 可以参考https://www.jianshu.com/p/f9ec65241b6b
Mr. Young's Picture Permutations
Mr. Young's Picture Permutations 给出一个有k列的网格图,以及每列图形的高度$n_i$,下端对齐,保证高度递减,设有n个网格,询问向其中填1~n保证每行每列单调递增 ...
day1-字符串、列表
字符串操作: name = "Wills Qian" # 创建字符串变量 print(len(name)) # 打印字符串长度 print(name[0]) # 提取第一个字符W ...
A*算法——第K短路
例题 JZOJ senior 1163第K短路题目描述 Bessie 来到一个小农场,有时她想回老家看看她的一位好友.她不想太早地回到老家,因为她喜欢途中的美丽风景.她决定选择K短路径,而不是最短路 ...
IOS6 新特性之UIActivityViewController详解
新的IOS6增加了一些新特性.因为应用需要,所以在国庆的几天里.研究了一下IOS6的说明文档,然后大概地总结了一下UIActivityViewController的用法与大家分享. 首先从实际效果入 ...
密码学笔记(5)——Rabin密码体制和语义安全性
一.Rabin密码体制 Rabin密码体制是RSA密码体制的一种,假定模数$n=pq$不能被分解,该类体制对于选择明文攻击是计算安全的.因此,Rabin密码体制提供了一个可证明安全的密码体制的例子:假 ...
使用async读取异步数据
使用传统方式读取异步数据 const fs = require('fs') fs.readFile('readme.txt', function (err, data) { console.log(d ...
<每日一题>题目29：五个数字能组成多少互不重复的四位数
#有五个数字:1.2.3.4.5,能组成多少个互不相同且无重复数字的四位数?各是多少? e =[] for a in range(1,6): for b in range(1,6): for c in ...

javascript基础：dom

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

随机推荐

热门专题