文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法

查找

直接查找
var obj = document.getElementById('i1')             // 根据ID获取一个标签

var obj = document.getElementsByName('i1')          // 根据Name属性获取标签集合

var obj = document.getElementsByClassName('c1')     // 根据Name属性获取标签集合

var obj = document.getElementsByTagName('div')      // 根据标签名获取标签集合
间接查找
obj.parentElement           // 父标签元素元素

obj.children                // 所有子标签

obj.firstElementChild       // 第一个子标签元素

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

obj.nextElementSibling      // 下一个兄弟标签元素

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

操作

文件内容操作
  • innerText 仅仅获取文本
  • innerHTML 获取全部内容

    示例：
<body>

<div id="i1">Welcome <span>to </span>my site</div>

<script>

    var tag_list = document.getElementsByTagName("div"); //返回值为列表

    console.log(tag_list[0].innerText);

    console.log(tag_list[0].innerHTML);

</script>

执行结果：

Welcome to my site

Welcome <span>to </span>my site
  • value

    • input 获取/改变当前标签中的值
    • select 获取/改变选中的value值
    • textarea 获取/改变当前标签中的值

      输入框示例：
<body>

<input type="text" id="i1" value="请输入内容">

<script>

    function Focus(){

        if(this.value==="请输入内容"){

            this.value = "";

        }

    }

    function Blur(){

        if(this.value.length===0){

            this.value = "请输入内容";

        }

    }

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

    myTag.onfocus = Focus;

    myTag.onblur = Blur;

</script>

</body>
样式操作
  • 通过对 class 进行操作来修改样式

    • obj.className(以字符串形式获取对象的class名)
    • obj.classList(以列表形式获取对象的class名)
      • classList.add
      • classList.remove
  • 直接修改/添加 style 中的样式
    • obj.style.fontSize = '16px';
属性操作
obj.attributes              // 获取所有属性

obj.getAttribute('key')     // 获取指定key的value

obj.setAttribute('key', 'value')    // 修改制定key的value

objremoveAttribute('key')   // 移除指定的key
创建标签
- 字符串形式

    var tag = '<div></div>';

- 对象的方式

	document.createElement('div')

示例：

<body>

<div id="i1">

    <p>

        <input type="button" onclick="add_ele1()" value="+"/>

        <input type="button" onclick="add_ele2()" value="+"/>

    </p>

    <p>

        <input type="text" style="background-color: black"/>

    </p>

</div>

<script>

    // 通过字符串方式创建新标签

    function add_ele1(){

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

        document.getElementById('i1').insertAdjacentHTML('beforeend',tag);

    }

    // 通过对象的方式创建新标签

    function add_ele2(){

        var tag = document.createElement('input');  // 创建一个 input 标签

        tag.setAttribute('type','text');            // 设置标签属性

        tag.style.backgroundColor='red';            // 设置标签样式

        var p = document.createElement('p');        // 创建一个 p 标签

        p.appendChild(tag);                         // 将 tag 标签添加到 p 标签中

        document.getElementById('i1').appendChild(p);// 将 p 标签添加到id='i1'的标签中

    }

</script>

</body>
提交表单(任何标签通过DOM都可以提交表单)
document.getElementById('form').submit
其他
console.log()	                              //输出框

alert()			                              //弹出框

var v = confirm('提示信息')		              //确认框(return：v = true/false)

location.href	                              //获取当前URL

location.href = ‘’	                          //重定向、跳转

location.reload == location.href = location.href    //页面刷新

var obj = setInterval(function(){},1000)	  //设置定时器(单位：ms)

clearInterval(obj)	                          //清除定时器

setTimeout(function(){},1000)	              //只执行一次的定时器

clearTimeout	                              //清除定时器

事件

绑定事件两种方式：
  • 直接在标签绑定
<input id='i1' type='button' onclick='ClickOn(this)'>

function ClickOn(self){

// self:当前点击的标签

}
  • 先获取DOM对象，然后进行绑定

只能绑定一个

<input id='i1' type='button'>

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

// this：当前点击的标签

}

可以绑定多个

input id='i1' type='button'>

document.getElementById('i1').addEventListener('click',function(){},false)

document.getElementById('i1').addEventListener('click',function(){},false)

// false:冒泡 true:捕捉 默认为false

关于冒泡、捕捉

onclick点击时

onblur光标移除时

onfocus获取光标时

阻止事件发生

DOM 方式

<a onclick='return Func();'></a>

function Func(){

    return false;

}

jQuery方式

词法分析

示例：

function func(age){

	console.log(age);

	var age = 27

	console.log(age);

	function age(){}

	console.log(age);

}

func(3);

执行结果：

function age(){}

27

27

函数调用前生成AO(active object)

分析顺序：

1.形式参数

2.局部变量

3.函数生成表达式

过程：

1.形式参数

AO.age = undifined

AO.age = 3

2.局部变量

AO.age = undifined(没有执行函数，没有赋值)

3.函数生成表达式

AO.age = function()

DOM 基础的更多相关文章

  1. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  2. Javascript DOM基础（一）概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  4. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  5. 第一百一十三节，JavaScript文档对象，DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  6. DOM基础（四）

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  7. DOM基础（二）

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  8. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

  9. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

  10. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

随机推荐

  1. git clone 带用户名密码

    git使用用户名密码clone的方式: git clone http://username:password@remote eg: username:  abc@qq.com, pwd: test, ...

  2. 1.3 SQL循环

    1.while循环(1~20的和) 2.while_break_continue(1~20偶数和) 3.if选择象限 4.return:在查询中无条件退出,return后面的语句将不会被执行. 5.g ...

  3. ionic2APP 如何处理返回键问题

    1.APP中难免会有自定义各种modal.alert,modal或alert处于激活状态时android用户按物理返回键,页面被返回,而这些弹窗切没有被返回,一种解决办法是可以在每个组件内用生命周期钩 ...

  4. 只有自身跟上时代，offer就会如期而至

    [官宣]只有自身跟上时代,offer就会如期而至 最近对求职者来说,似乎颇不太平,各种裁员扑面而来,许多企业(易车.滴滴等)相继官宣裁员信息,包括阿里缩减校招,百度减少社招等,都让人不禁打嗦.但我们华 ...

  5. Java IO总结

  6. C++标准库之迭代器

    迭代器大致可分为: 输入迭代器,InputIterator 输出迭代器,OutputIterator 前行迭代器,ForwardIterator 双向迭代器,BidirectinalIterator ...

  7. CSS效果：跑马灯按钮

    HTML代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  8. idea 引入web、配制tomcat

    引入web包: https://www.cnblogs.com/chenloveslife/p/8973912.html 配置tomcat:https://blog.csdn.net/qq_33257 ...

  9. SpringBoot四种读取properties文件的方式

    环境:IDEA jdk1.8 SpringBoot2.1.4 例,如下默认application.properties文件   一.使用`@ConfigurationProperties`注解将配置文 ...

  10. String 和 StringBuilder

    官方解释 String  String 类代表字符串.字符串是常量:它们的值在创建之后不能更改. StringBuilder 一个可变的字符序列. 疑问 字符串是常量:它们的值在创建之后不能更改.那 ...