前端开发【第四篇: 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 ...

随机推荐

linux查看用户登录时间以及命令历史
1.查看当前登录用户信息 who命令: who缺省输出包括用户名.终端类型.登陆日期以及远程主机. who /var/log/wtmp 可以查看自从wtmp文件创建以来的每一次登陆情况 (1)-b:查 ...
js循环中使用async/await踩过的坑
最近写koa的时候遇见需要在循环中使用async/await的情况,当然第一反应就是直接上forEach,然后就直接翻车了... 直接上代码: function handleSql(val) { re ...
python基础知识点（unittest)
目录: unittest 单元测试框架 1.写用例: Testcase 2.执行:TestSuite 类 TestLoader 类 3.比对结果(期望值/实际值):断言函数 4.结果:TestText ...
LeetCode--032--最长有效括号(java)
给定一个只包含 '(' 和 ')' 的字符串,找出最长的包含有效括号的子串的长度. 示例 1: 输入: "(()" 输出: 2 解释: 最长有效括号子串为 "()&quo ...
selenium chromedriver geckodriver iedriverserver下载
chromedriver与chrome的的对应版整理: chromedriver版本 chrome版本 v2.9 v31-v34 v2.10 v33-v36 v2.11 v36-v40 v2.12 v ...
跟我一步一步写出MongoDB Web 可视化工具（一）
前言距离上一次写博客,已经不记得大概有多长时间了, 是时候继续前行了... MongoStudio 是一个Web的 MongoDB可视化操作工具, 一年半前已经写好, 但是总觉得不足, 现从头开始. ...
用tar压缩xz格式出错
解决办法安装xz软件包 yum install xz -y
vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
// 下面是引入nodejs的路径模块 var path = require('path') // 下面是utils工具配置文件,主要用来处理css类文件的loader var utils = req ...
go生成不重复的纯数字6位的随机数
最近在学go, 按照入门指南学完go的基础语法, 开始学习go的标准库; 借用生成这个小任务复习一下go的基础语法. 推荐go编辑, jb公司的goland, 超级好用. 推荐go入门指南, htt ...
python note 4
1.使用命令行打开文件 t=open('D:\py\123.txt','r') t.read() 在python和很多程序语言中""转义符号,要想输出\要么多加一个\写成\ 要么在 ...

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

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

随机推荐

热门专题