DOM（Document Object Model 文档对象模型）

一个web页面被封装成一个dom对象，通过dom中的js对页面的标签进行操作

一、获取对象

浏览器页面上右键--检查--console，在console控制台可以直接通过dom，输入命令

// 直接获取标签

document.getElementById('i1'); //获取id为i1的标签

document.getElementsByTagName('div'); //根据标签名称获得标签数组

document.getElementsByClassName('c1'); //根据class属性获取标签的数组

document.getElementsByName('dsx'); //根据name属性获取标签数组

// 间接获取标签

var tmp=document.getElementById('h-test');

tmp.parentElement; // 父节点标签元素

tmp.children; //所有子标签

tmp.firstElementChild; //第一个子标签元素

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

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

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

二、文本内容

innerText和innerHTML

innerHTML与innerText

tmp.innerText; // 获取标签中的文本内容

tmp.innerText='更改标签的文本内容'; //更改标签内文本内容

tmp.innerHTML; // 获取标签中的所有内容，包含html代码

tmp.innerHTML = '<a href="http://www.imdsx.cn">更改标签的html代码</a>' // innerHTML 可以将含有HTML代码的字符串变为标签

有一段html代码是这样的：

首先获取到div对象：var div=document.getElementById('inner1')

innerText获取到div标签内的文本内容：div.innerText,结果就只有div标签内的文本

innerHTMlL获取div标签内的所有html代码：div.innerHTML,结果就是div内的html代码：

同时也可以通过innerText和innerHTML来更改文本和html：

div.innerText='更改div标签的文本'

div.innerHTML='<a href="www.baidu.com"></a>'

输入这些命令后，再次查看div.innerText和div.innerHTML,就可以看到结果已经变为更改后的

input和textarea

tmp.value; //获取input、textarea参数

tmp.value = '内容' // 对input、textarea的内容进行赋值

select标签

select标签

tmp.value; //获取select标签的value参数

tmp.value = '选项' // 修改select选项

tmp.selectedIndex; // 获取select标签的选项下标

tmp.selectedIndex = 1 // 通过下标更改select的选项

html代码如下

var tmp=document.getElementById('s1')//获取对象

获取value

修改value

三、操作样式

tmp.className = 'c1'; // 更改标签class属性 只能有一个class属性

tmp.classList;// 获取样式数组

tmp.classList.add('aaa'); //添加样式 数组

tmp.classList.remove('aaa'); //删除样式

tmp.checked; //获取checkbox的状态 true为勾选

操作单独样式

style.xxx //操作样式的粒度更加细化，操作单个样式属性，相当于在标签中增加一个style属性

style.backgroundColor // 例:在css中样式可以通过【-】进行连接，在JavaScript中，所有的【-】都被去掉，【-】后面的第一个字符大写

操作属性

注：css中的样式带有-的，在js中需要把-去掉，同时将-后面的首字母大写，比如background-color  在js中就是backgroundColor

四、操作属性

setAttribute(key,value) //设置属性，在标签中添加属性或自定义属性

removeAttribute(key) //删除属性，在标签中删除指定属性

attributes //获取标签的所有属性

我们在做selemium的时候，都需要定位到标签。但是对于display:none的，就获取不到，此时就需要先把该属性去掉，然后才能操作

五、创建标签

createElement(tagName) //通过DOM创建一个标签对象

appendChild(tagObj) //在父级标签内添加一个子标签对象

字符串方式创建标签

insertAdjacentHTML(where, tagStr) //父级标签内或外添加一个子、兄标签

beforeBegin //插入到获取到标签的前面

afterBegin //插入到获取到标签的子标签的前面

beforeEnd //插入到获取到标签的子标签的后面

afterEnd //插入到获取到标签的后面

六、字符串操作

1、字符串拼接：

2、根据角标获取字符串中的某个字符

3、获取字符串长度

4、字符串中字符的角标

5、字符串的大小写转换

6、获取子字符串

顾头不顾尾：

七、页面弹框和url

console.log(msg) //打印数据

alert() //弹框提示

confirm() //确认弹框，点击确认返回true ，点击取消返回false

location.href //获取当前的url

location.href = 'http://www.imdsx.cn' //重定向

location.reload() //刷新

location.href = location.href //刷新

八、绑定事件

1、直接绑定

在元素中直接写绑定函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>绑定事件</title>

</head>

<body>

<!--绑定事件 用onclick-->

<!--1、直接在元素中写onclick事件-->

<div>

        <input type="button" value="一键输入用户名" onclick="demo()">

    </div>

<script>

    function demo(){

        alert('点击按钮了')

  }

</script>

</body>

</html>

效果：点击按钮，会弹出提示框

注意：在js中，this指代绑定对象自身。将上面代码中的做修改

<div>

        <input type="button" value="一键输入用户名" onclick="demo(this)">

    </div>

<script>

    function demo(thi){//thi这里是形参，将上面onclick="demo(this)"中的this传过来，this就是绑定对象input自身。

        alert(thi)　　　
　　　　console.log(ths.parentElement)//ths指代input自身，从而可以继续获取到他的父标签
} </script>

效果如下，最终thi也就是this就是input对象。这时就获取到input这个对象了，可以进而再一步操作。相当于var input=document.getElementById('id1')

2、隐藏绑定

不在元素中直接添加事件。而是在js代码中，先获取到标签，然后再绑定事件

<div>

        <input id="i1" type="button" value="一键输入用户名">

    </div>

<div><input type="text" name="username"></div>

<script>

     var demo=document.getElementById('i1');//获取到元素

    demo.onclick=function(){//给获取到的元素编写事件，匿名函数

    demo.parentElement.nextElementSibling.lastElementChild.value='点击输入框事件触发'//获取到的元素input按钮 的父级div 的兄弟元素div 的最后一个孩子input 的value设置值

    }

</script>

效果，点击按钮，会让输入框自动输入设置的内容‘点击输入框事件触发’

html基础：DOM操作的更多相关文章

  1. JQuery基础DOM操作

    DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如 ...

  2. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  3. javascript基础DOM操作

    DOM 中的三个字母,D(文档)可以理解为整个 Web 加载的网页文档:O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象:M(模型)可以 ...

  4. HTML基础—DOM操作

    DOM(Document Object Model文档对象模型) 一个web页面大的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...

  5. ionic准备之angular基础——dom操作相关（6）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 基础DOM和CSS操作(三)

    CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...

  7. 基础DOM和CSS操作(二)

    元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...

  8. 基础DOM和CSS操作(一)

    DOM简介 DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改.在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性.扩展性.在jQuery ...

  9. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  10. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

随机推荐

  1. Java—包装类/System类/Math类/Arrays类/大数据运算/Collection接口/Iterator迭代器

    基本类型包装类 8种基本类型对应的包装类如: 将字符串转成基本类型: 将基本数值转成字符串有3种方式: 基本类型直接与””相连接即可:34+" " 调用String的valueOf ...

  2. Node.js简易服务器，配合type="module" 实现html文件script标签 ES module引入模块

    相信大家在测试type="module" 在html文件中直接模块化引入 js时,会出现一个跨域问题. 当我们将<script ></scirpt> 标签t ...

  3. STL函数库的应用第四弹——全排列（+浅谈骗分策略）

    因为基础算法快学完了,图论又太难(我太蒻了),想慢慢学. 所以暂时不写关于算法的博客了,但又因为更新博客的需要,会多写写关于STL的博客. (毕竟STL函数库还是很香的(手动滑稽)) 请出今天主角:S ...

  4. 用过 mongodb 吧， 这三个大坑踩过吗？

    一:背景 1. 讲故事 前段时间有位朋友在微信群问,在向 mongodb 中插入的时间为啥取出来的时候少了 8 个小时,8 在时间处理上是一个非常敏感的数字,又吉利又是一个普适的话题,后来我想想初次使 ...

  5. 每天都在用String，你真的了解吗？

    1.String概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如"abc")都可以被看作是实现此类的实例 String 中包括用于检查各个 ...

  6. TfidfVectorizer、CountVectorizer 和 TfidfTransformer 的简单教程

    TfidfVectorizer.CountVectorizer 和 TfidfTransformer 是 sklearn 中处理自然语言常用的工具.TfidfVectorizer 相当于 CountV ...

  7. TCL（事务控制语言）

    #TCL/*Transaction Control Language 事务控制语言 事务:一个或一组sql语句组成一个执行单元,这个执行单元要么全部执行,要么全部不执行. 案例:转账 张三丰 1000 ...

  8. 发布 npm遇到的问题

    npm publish 遇到 403 怎么办? 这说明你没有切换到 npm 原始源,那么你只需要用 npm config delete registry 删除淘宝源,然后再 publish. publ ...

  9. SPSSAU新功能上线：高级公式、综合得分一键计算！

    一直关注我们的朋友们一定会发现,近期SPSSAU增添了很多新功能. 我们精挑细选出6个最常使用的功能,介绍给大家,看看这些新功能你有没有解锁成功呢? 01 一键删除无效样本 “无效样本”功能中,添加了 ...

  10. 简述HBase的Bulk Load

    为什么用Bulk load? 批量加载数据到HBase集群,有很多种方式,比如利用 HBase API 进行批量写入数据.使用Sqoop工具批量导数到HBase集群.使用MapReduce批量导入等等 ...