前端开发【第四篇: Dom操作】

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

document.getElementById             根据ID获取一个标签  获取单个元素

document.getElementsByName          根据name属性获取标签集合  获取多个元素(列表)

document.getElementsByClassName     根据class属性获取标签集合 获取多个元素(列表)

document.getElementsByTagName       根据标签名获取标签集合  获取多个元素(列表)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>示例</title>

</head>

<body>

<div>

    <div id="i1">我是i1</div>

</div>

<span>span1</span>

<span>span2</span>

<span>span3</span>

<script>

    function test() {

        var tag = document.getElementsByTagName('span');

        for (var i=0;i<tag.length;i++) {tag[i].innerText=777}

    }

    test();

</script>

</body>

</html>

示例

2、间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

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

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

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

二、操作

1、内容

innerText   //仅文本

outerText

innerHTML   //全部内容

innerHTML

value       //获取值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div style="margin: 0 auto; width: 400px; background-color: white">

    <input id="i1" onfocus="func();" onblur="Blur();" type="text" value="请输入关键字" />

    <input type="text" placeholder="请输入关键字" style="border: solid 1px black">

</div>

<script>

    function func(){

       var tag=document.getElementById('i1');

       var val=tag.value ;

       if(val == "请输入关键字"){

           tag.value="";

       }

    }

    function Blur() {

        var tag=document.getElementById('i1');

        var val=tag.value;

        if(val.length == 0){tag.value="请输入关键字"}

    }

</script>

</body>

</html>

搜索框代码示例

2、属性操作

attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性

removeAttribute()  // 删除属性

getAttribute(key)         // 获取指定标签属性

3、class操作

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加指定类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style>

  .item .header {

      background-color: #1AC567;

      height: 35px;

      color: white;

      line-height: 35px;

       }

  .hide {

      display: none;

        }

</style>

</head>

<body>

<div style="width: 300px">

    <div class="item">

    <div id="i1" class="header " onclick="ChangeMenu('i1');">菜单一</div>

    <div class="content">

        <div>内容1</div>

        <div>内容2</div>

        <div>内容3</div>

    </div>

    </div>

               <div class="item">

               <div id="i2" class="header" onclick="ChangeMenu('i2');">菜单二</div>

               <div class="content hide ">

                  <div>内容1</div>

                  <div>内容2</div>

                  <div>内容3</div>

               </div>

               </div>

                              <div class="item">

                                <div id="i3" class="header" onclick="ChangeMenu('i3');">菜单三</div>

                                <div class="content hide">

                                    <div>内容1</div>

                                    <div>内容2</div>

                                    <div>内容3</div>

                                </div>

                              </div>

</div>

<script>

    function  ChangeMenu(nid) {

    var current_header= document.getElementById(nid);

    var item_list=current_header.parentElement.parentElement.children;

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

        var current_item=item_list[i];

        current_item.children[1].classList.add('hide');

        }

     current_header.nextElementSibling.classList.remove('hide');

    }

</script>

</body>

</html>

代码示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide {

            display: none;

        }

        .c1 {

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background-color: black;

            opacity: 0.6;

            z-index: 2;

        }

        .c2 {

            width: 500px;

            height: 300px;

            background-color: white;

            position: fixed;

            left: 50%;

            top: 50%;

            margin-left: -250px;

            margin-top: -200px;

            z-index: 10;

        }

    </style>

</head>

<body style="margin: 0 auto;">

<div>

    <input type="button" value="添加" onclick="showModel()"/>

    <input type="button" value="全选" onclick="AllModel()"/>

    <input type="button" value="取消" onclick="CancelModel()"/>

    <input type="button" value="反选" onclick="ReviseModel()"/>

    <table style="margin-top:10px; border: solid black 1px;">

        <thead>

            <tr>

                <th>选项:</th>

                <th>主机名</th>

                <th>端口</th>

            </tr>

        </thead>

        <tbody id="tb">

            <tr>

            <td><input type="checkbox"></td>

            <td>192.168.10.1</td>

            <td>80</td>

            </tr>

            <tr>

            <td><input type="checkbox"></td>

            <td>192.168.10.2</td>

            <td>8080</td>

            </tr>

        </tbody>

    </table>

</div>

<div id="i1" class="c1 hide"></div>

<div id="i2" class="c2 hide">

    <p>用户名: <input type="text"></p>

    <p>密码:<input type="text"></p>

    <p>

        <input type="button" value="取消" onclick="hideModel()">

        <input type="button" value="确定"  >

    </p>

</div>

<script>

    function showModel() {

         document.getElementById('i1').classList.remove('hide');

         document.getElementById('i2').classList.remove('hide');

         document.getElementById('i2').classList.remove('hide');

    }

    function hideModel() {

        document.getElementById('i2').classList.add('hide');

        document.getElementById('i1').classList.add('hide');

    }

    function AllModel() {

        var tbody = document.getElementById('tb');

        var tr_list = tbody.children;

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

            var current_tr = tr_list[i];

            var check_box = current_tr.children[0].children[0];

            check_box.checked = true;

        }

    }

     function CancelModel() {

         var tbody = document.getElementById('tb');

         var tr_list = tbody.children;

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

             var current_tr = tr_list[i];

             var check_box = current_tr.children[0].children[0];

             check_box.checked = false;

         }

     }

    function ReviseModel(){

        var tbody = document.getElementById('tb');

         var tr_list = tbody.children;

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

             var current_tr = tr_list[i];

             var check_box = current_tr.children[0].children[0];

             if (check_box.checked){check_box.checked=false;}

             else {check_box.checked=true;}

         }

    }

</script>

</body>

</html>

全选-反选-取消-代码示例

4、样式操作

var obj = document.getElementById('i1')

obj.style.fontSize = "32px";     //<style="font-size:16px;background-color:red;">  对比 没有-

obj.style.backgroundColor = "red";

5、标签操作

a.创建标签

// 方式一

var tag = document.createElement('a')

tag.innerText = "wupeiqi"

tag.className = "c1"

tag.href = "http://www.cnblogs.com/wupeiqi"

// 方式二

var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

b.操作标签

// 方式一

var obj = "<input type='text' />";

xxx.insertAdjacentHTML("beforeEnd",obj);

xxx.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

// 方式二

var tag = document.createElement('a')

xxx.appendChild(tag)

xxx.insertBefore(tag,xxx[1])

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="submit" value="+" onclick="AddEle();">

<div id="i1">

    <input type="text">

</div>

<script>

//    function AddEle() {

//

//        var tag= "<p><input type='text'></p>";

//        document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

//

//

//

//    }

    function  AddEle() {

        var tag=document.createElement("input");

        tag.setAttribute("type","text");

        tag.style.color='red';

        var p=document.createElement('p');

        p.appendChild(tag);

        document.getElementById('i1').appendChild(p);

    }

</script>

</body>

</html>

添加标签示例

6、提交表单

document.geElementById('form').submit()   //除了input标签外  借助javascript任何标签都可以提交表单

7.其他

console.log                 输出框

alert                       弹出框

confirm                     确认框      var v = confirm('真的要删除吗？')

// URL和刷新

location.href               获取当前URL

location.href = "url"       重定向/设置当前URL

location.reload()           重新加载 

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

8.事件

对于事件需要注意的要点：

this
event
事件链以及跳出

this标签当前正在操作的标签，event封装了当前事件的内容。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1" width="300px">

    <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

     <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

     <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

</table>

<script>

    var tag=document.getElementsByTagName('tr');

    var len=tag.length;

    for (var i=0;i<len;i++){tag[i].onmouseover = function () {this.style.backgroundColor='red';

    }}

     for (var i=0;i<len;i++){tag[i].onmouseout = function () {this.style.backgroundColor='';

    }}

</script>

</body>

</html>

事件示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="1" width="300px">

    <tr onmouseover="t1(0)" onmouseout="t2(0)">

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

     <tr onmouseover="t1(1)" onmouseout="t2(1)">

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

     <tr onmouseover="t1(2)" onmouseout="t2(2)">

        <td>1</td>

        <td>2</td>

        <td>3</td>

    </tr>

</table>

<script>

    function t1(n) {

        var tag=document.getElementsByTagName('tr')[n];

        tag.style.backgroundColor='green';

    }

    function t2(n) {

        var tag=document.getElementsByTagName('tr')[n];

        tag.style.backgroundColor='';

    }

</script>

</body>

</html>

事件-换行变色

绑定事件的两种方式：

a.直接标签绑定 onclick='xxx();'

b.先获取Dom对象，然后进行绑定

document.getElementById('xxx').onclick

document.getElementById('xxx').onfocus

this:当前触发事件的标签

a.第一种绑定方式

<input type="text" onclick="Clickon(this)"/>

<script>

function Clickon(self){

    // self代指当前点击的标签

}

</script>

b.第二种绑定方式

<input type="text" id="i1" />

<script>

    Document.getElementById('i1').onclick=function(){

      // this 代指当前点击的标签

    }

}

</script>

事件捕捉和冒泡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<style>

#main {

background-color:red;

height:400px;

width:200px;

}

#content { 

background-color:green;

height:200px;

width:100px;

}

</style>

</head>

<body>

<div id='main'>

<div id='content'></div>

</div>

<script>

var mymain = document.getElementById('main');

var mycontent = document.getElementById('content');

mymain.addEventListener('click',function(){console.log('main'),false}); //冒泡

mycontent.addEventListener('click',function(){console.log('content'),false}); //冒泡

// mymain.addEventListener('click',function(){console.log('main'),true}); //捕捉

// mycontent.addEventListener('click',function(){console.log('content'),true}); //捕捉

</script>

</body>

</html>

代码

前端开发【第四篇: Dom操作】的更多相关文章

基于GBT28181：SIP协议组件开发-----------第四篇SIP注册流程eXosip2实现(一)
原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://www.cnblogs.com/qq1269122125/p/3945294.html. 上章节讲解了利用自主开发的组件SIP组件l ...
Web前端开发的四个阶段（小白必看）
第一阶段:HTML的学习超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器 ...
python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
前端面试(原生js篇) - DOM
根据我的面试经历,一般小公司的面试环节,比较关心框架的熟练程度,以及独立开发组件的能力但大厂通常有五轮以上的面试,而且对 js 基础语法很是看重于是我总结了一些关于 js 基础的面试对话,有的当时 ...
前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
web前端开发面试被虐篇(一)
地点:北京职位:前端开发工程师要求:达到中级开发,JS基础足够扎实,css基础扎实,要求纯手写代码面试过程: 进门一个面相老成的大叔递给我一份题,说别的都不好使先做题看看水平,说话语气很温和明显 ...
python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
前端学习(二十三）DOM操作，事件（笔记）
javascript 组成部分 1.ECMAScript javascript的核心解释器 2.DOM Document Object Modle 文 ...
前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象所有浏览器都支持 wind ...

随机推荐

windows 根据端口查看进行PID 并杀掉进程
1. 首先用netstat -ano | find “端口号”查出进程号明明有端口号是17568和18892, 如何确定是17568呢 2. takslist 查询当前的进行 3. 如何杀死进程呢 ...
Windows 7环境下网站性能测试小工具 Apache Bench 和 Webbench使用和下载
1.简要说明: Apache Bench 是Apache的网站性能测试小程序,Windows平台下的程序名简称ab.exe,要想获得这个80k的可执行程序,用户需要下载整个Apache Httpd软件 ...
pyhton课堂随笔-基本画图
%matplotlib inline import matplotlib as mpl import matplotlib.pyplot as plt import numpy as np impor ...
用node.js启动mock.js
Node.js Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言.官网下载n ...
python 字符串替换、正则查找替换
import re if __name__ == "__main__": url = " \n deded<a href = "">这是第 ...
springcloud-zuul路由网关
路由网关(zuul) 在微服务架构中,需要多个基础的服务治理组件,包括服务注册与发现.服务消费.负载均衡.断路器.智能路由.配置管理等,由这个基础组件相互协作,共同组建了一个简单的微服务系统.一个简 ...
第一次提交 nacos 代码
新建 issue认领 issuefork修改 nacos 项目 .git/config 中的用户信息pushcreate pull request 到 develop 分支
eclipse常用工具
Eclipse 保存文件时自动格式化代码很多同学不知道Eclipse有个很有用的功能,就是自动格式源代码的功能,一般大家都是直接Ctrl+Shift+F手动格式化,多浪费时间. 其实Eclipse里 ...
Flex 弹性盒基本语法
网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...
Tensorflow常用的函数:tf.cast
1.tf.cast(x,dtype,name) 此函数的目的是为了将x数据,准换为dtype所表示的类型,例如tf.float32,tf.bool,tf.uint8等 example: import ...

前端开发【第四篇: Dom操作】

前端开发【第四篇: Dom操作】的更多相关文章

随机推荐

热门专题