DOM 基础
文档对象模型(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;
}
词法分析
示例：
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 基础的更多相关文章
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础（四）
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
- DOM基础（二）
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
- 第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
随机推荐
- pytest自动化4：fixture之yield实现teardown
出处:https://www.cnblogs.com/yoyoketang/p/9401554.html 前言: 上一篇介绍了fixture通过scope参数控制setup级别,我们一起来温故下fix ...
- IP通信基础课堂笔记----简答题
1.局域网优点:局域网特点(5) 2.10BASE-T技术特性(8) 3.网桥/交换机的优点(3):缺点(3) 4.虚拟局域网特点(4) *转发表或原MAC地址规则:记录源MAC地址 *VLAN帧格式 ...
- maven下载源码
能下载到源代码的原则是仓库中打了resource的jar包 1.使用命令 mvn dependency:sources 下载依赖包的源代码. mvn dependency:sources -Ddown ...
- springboot整合mybatics PLUS
首先添加maven依赖: <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactI ...
- sql注入1
一.函数 1.version() MYsql版本 2.user() 数据库用户名 3.database() 数据库名 4.@@datadir 数据库路径 5.@@version_compi ...
- centos6.5卸载及安装git
一.卸载原有的git 用whereis git命令来检查是否已经安装了git版本的 再使用命令:yum remove git卸载git 二.安装git (一)官网下载:https://mirrors. ...
- Goland配置
Global GOPATH 用来设置所有go项目的大目录 Project GOPATH 用来设置单项目目录 2个目录必须配置
- shell 删除颜色代码
sed -r "s/\x1B\[([0-9]{1,2}(;[0-9]{1,2})?)?[m|K]//g"
- python+flask+session写供前端使用的后台接口，实现登录保存session时报错。
RuntimeError: The session is unavailable because no secret key was set. Set the secret_key on the a ...
- modelSIM仿真ROM核报错
用Quartus Prime 15.1调用modelSIM进行RTL仿真,modelSIM的transcript框框总是有Failed to Open Readmem File提示. 错误原因:IP核 ...