js之DOM对象一

一、什么是HTML  DOM

  • HTML  Document Object Model(文档对象模型)
  • HTML DOM 定义了访问和操作HTML文档的标准方法
  • HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)

二、DOM树

画dom树是为了展示文档中各个对象之间的关系,用于对象的导航。

三、DOM节点

1.节点类型

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的:
    整个文档是一个文档节点 
    每个 HTML 标签是一个元素节点 
    包含在 HTML 元素中的文本是文本节点 
    每一个 HTML 属性是一个属性节点

其中,document与element节点是重点。

2.节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

    • 在节点树中,顶端节点被称为根(root)
    • 每个节点都有父节点、除了根(它没有父节点)
    • 一个节点可拥有任意数量的孩子
    • 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分,以及节点之间的关系:

3.节点查找

有两种方式:

  方式一:直接查找节点(这是一个查找方法)

//     节点查找(节点也就是一个个的标签)
document.getElementById('idname');//按照id查找,拿到的是一个标签对象
document.getElementsByClassName('classname');//按照class标签去找,得到的是一个数组里存放的标签
document.getElementsByTagName('tagname');//通过标签名去找,拿到的也是一个数组
var a = document.getElementsByName('yuan'); //按照name属性去找,拿到的也是一个数组
console.log(a);
 1 // /    ==2.========================
2 var ele = document.getElementById('div1');
3 console.log(ele.length);//返回undified
4
5 var ele2 = document.getElementById('div3');
6 console.log(ele2.length);//返回undified
7
8 var ele3 = document.getElementsByClassName('div2');
9 console.log(ele3.length); //返回1
10
11 var ele4 = document.getElementsByTagName('p');
12 console.log(ele4.length) ;//返回1
13
14 var ele5 = document.getElementsByName('haiyan');
15 console.log(ele5.length); //返回1
16
17 //====3.=============================
18 id和name的不支持
19 var div1=document.getElementById("div1");
20
21 ////支持;
22 var ele= div1.getElementsByTagName("p");
23 alert(ele.length);
24 ////支持
25 var ele2=div1.getElementsByClassName("div2");
26 alert(ele2.length);
27 ////不支持
28 var ele3=div1.getElementById("div3");
29 alert(ele3.length);
30 ////不支持
31 var ele4=div1.getElementsByName("yuan");
32 alert(ele4.length)

length属性

 上述的length:返回的是标签的个数,,一个是在局部下的,,,一个是在全局下的(document.~~~)

方式二:导航查找节点:通过某一个标签的位置去查找另一个标签(这是一个导航属性)

'''

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

'''
1 //    方式二:导航查找
2 //<div id ='div1'>
3 // <div class="div2" name = 'haiyan'>lallala</div>
4 // <div name="haiyan">lkkaakkka</div>
5 // <div id ='div3'>aaaaaaaaaaaaaa</div>
6 // <p>hrllo</p>
7 //</div>
8 //注意:1.如果是数组的话后面切记getElementsByClassName('div2')[0]
9 // 2.查找元素的那些方法Elements加了s的打印的就是数组
10 // 1,==================
11 var ele = document.getElementsByClassName('div2')[0];
12 var ele1= ele.parentElement;
13 console.log(ele1) ;//找div2标签的父亲
14 // 2.===============
15 var ele = document.getElementById('div1');
16 var ele1 = ele.children;
17 console.log(ele1) ; //找到div1下的所有的子标签
18 // 3.===================
19 var ele = document.getElementById('div1');
20 var ele1 = ele.firstElementChild;
21 console.log(ele1); //找到div1下的第一个子标签的元素
22 // 4.==================
23 var ele = document.getElementById('div1');
24 var ele1 = ele.lastElementChild;
25 console.log(ele1); //找到div1下的最后一个子标签的元素
26 // 5.===============
27 var ele = document.getElementsByName('haiyan')[0];
28 var ele1 = ele.nextElementSibling;
29 console.log(ele1) ; //下一个兄弟标签元素
30 // 6.===============
31 var ele = document.getElementsByName('haiyan')[0];
32 var ele1 = ele.previousElementSibling;
33 console.log(ele1) //上一个兄弟标签元素

测试

4.节点操作

1.创建节点

createElement(标签名) :创建一个指定名称的元素。
例:var  tag=document.createElement(“input")
tag.setAttribute('type','text');

2.添加节点

追加一个子节点(作为最后的子节点)

somenode.appendChild(newnode)

把增加的节点放到某个节点的前边

somenode.insertBefore(newnode,某个节点);

3.删除节点

removeChild():获得要删除的元素,通过父元素调用删除

4.替换节点

somenode.replaceChild(newnode, 某个节点);

5.节点属性操作

  1.获取文本节点的值:innerText    innerHTML

    innerText:不管你是赋值还是取值,只能识别纯文本

     innerHtml:既可以识别纯文本,也可以识别标签
//    文本属性
// 1.innerText:不管你是赋值还是取值,只能识别纯文本
var a1 = document.getElementsByClassName('c2')[0];
// console.log(a1);
//取值操作
console.log(a1.innerText); //你好吗/
console.log(a1.innerHTML); //你好吗/
//赋值操作
a1.innerText='Egon';
a1.innerHTML='<a href="">hello</a>';
// 2.innerHtml:既可以识别纯文本,也可以识别标签
var b1 = document.getElementsByClassName('c2')[1];
// console.log(b1);
//取值操作
console.log(b1.innerText);
console.log(b1.innerHTML);
//赋值操作
b1.innerText = 'lala';
b1.innerHTML = '<input type="text">';

  2.属性(attribute)操作:

 elementNode.setAttribute(name,value)
elementNode.getAttribute(属性名) <-------------->elementNode.属性名(DHTML)
elementNode.removeAttribute(“属性名”);
   泛指所有的属性
  getAttribute 可以操作其他的,,但是不可以操作class
<body><div class="c1" id="d1">DIV</div>
<script>
var ele = document.getElementsByClassName('c1')[0];
ele.id='d2';//修改id
console.log(ele); //取属性值 :
// 方式一
console.log(ele.getAttribute('id'));
// 方式二
console.log(ele.id);
/ 属性赋值
// 方式一
ele.setAttribute('id','d3');
console.log(ele);
// 方式二
ele.id = 'd3';
console.log(ele);

  3.value获取当前选中的value值

    1.input   
          2.select (selectedIndex)
          3.textarea

  4.关于class的操作:

//    class属性=============
var ele = document.getElementsByClassName('c1')[0];
console.log(ele.className); //打印类的名字 ele.classList.add('hide');
console.log(ele); //<div class="c1 hide" id="d1"> ele.classList.remove('hide');//吧添加的remove移除了
console.log(ele)

  5.改变css样式:

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

                             .style.fontSize=48px

四、DOM Event(事件)

1.事件类型

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。 onload 一张页面或一幅图像完成加载。 onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开 onselect 文本被选中。
onsubmit 确认按钮被点击

2.绑定事件方式

方式一

<!--绑定事件的方式一-->
<div onclick="foo(this)">div</div>
<div class="c1">div2</div>
<script>
function foo(self) {
console.log(self); //<div onclick="foo(this)" style="color: red;">
self.style.color = 'red';
}

方式二

//方式二
// 事件的绑定方式2:标签对象.on事件 = function (){}
var ele=document.getElementsByClassName("c1")[0];
ele.onclick=function () {
console.log(this); // this 代指: 当前触发时间的标签对象;
this.style.fontSize="30px"
};

3.事件介绍

4.事件传播

实例练习

1.左侧菜单

2.搜索框

3.模态对话框

4.表格案例

5.select移动

6.二级联动

7.跑马灯与tab切换

前端之JavaScript:JS之DOM对象一的更多相关文章

  1. 前端之JavaScript:JS之DOM对象三

    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...

  2. 前端之JavaScript:JS之DOM对象二

    继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...

  3. JavaScript基础15——js的DOM对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. js的DOM对象

    1.js的Array对象           ** 创建数组(三种)                          - var arr1 = [1,2,3];                    ...

  5. js的dom对象(带实例超详细全解)

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  6. jQuery对象与JS原生dom对象之间的转换

    jQuery就是JS的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象.但是jQuery对象也不是万能的,有一些JS对象有的能,jQuery对 ...

  7. js操作DOM对象

    js操作DOM对象  (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...

  8. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  9. 转:js包装DOM对象

    我们在日常的应用中,使用Javascript大多数时间都是在用DOM ,以致于很多人都有一种看法就是DOM==JS,虽然这种看法是错误的,但是也可以说明DOM的重要性. 这就导致了我们在写JS的时候, ...

随机推荐

  1. 举例讲解Python中的死锁、可重入锁和互斥锁

    举例讲解Python中的死锁.可重入锁和互斥锁 一.死锁 简单来说,死锁是一个资源被多次调用,而多次调用方都未能释放该资源就会造成死锁,这里结合例子说明下两种常见的死锁情况. 1.迭代死锁 该情况是一 ...

  2. Linux几个命令的升级替代品

    grep => ack, agack和ag是两个文本搜索工具,比自带的grep要好用得多.在指定目录下搜索文本时,它们不需要像grep那样指定各种命令行选项,输出结果也会包含文件名和行号,并且会 ...

  3. 在树莓派上搭建jupyter notebook server

    自从搬家后,树莓派闲置了好一段时间,最近打算将其利用起来.想来想去,搭个jupyter notebook用要靠谱的,毕竟经常要实验一些Python脚本. 具体过程参考以下链接: https://www ...

  4. 成功秀了一波scala spark ML逻辑斯蒂回归

    1.直接上官方代码,调整过的,方可使用 package com.test import org.apache.spark.{SparkConf, SparkContext} import org.ap ...

  5. 语言I—2019秋作业02

    这个作业属于那个课程 这个作业要求在哪里 我在这个课程的目标是 这个作业在那个具体方面帮助我实现目标 参考文献 C语言程序设计I https://edu.cnblogs.com/campus/zswx ...

  6. Java json框架简介

    Gson,FastJson,Jackson,Json-lib性能比较 https://www.xncoding.com/2018/01/09/java/jsons.html 结论:FastJson虽然 ...

  7. Luogu P4040 [AHOI2014/JSOI2014]宅男计划

    题目 显然存活天数与叫外卖次数的函数是凸函数. 所以三分买外卖的次数. 然后把食品按保质期升序排序. 并且单调栈搞一下,把又贵又保质期短的丢掉. 那么随着保质期的增加,食品的价格一定上涨. 所以我们从 ...

  8. 异步Promise及Async/Await可能最完整入门攻略

    此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...

  9. 【源码解读】pix2pix(一):训练

    源码地址:https://github.com/mrzhu-cool/pix2pix-pytorch 相比于朱俊彦的版本,这一版更加简单易读 训练的代码在train.py,开头依然是很多代码的共同三板 ...

  10. 浏览器常用12种兼容问题(JS)

    //1.滚动条到顶端的距离(滚动高度) var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; / ...