学习记录013-HTML基础dom操作

Posted guodengdeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习记录013-HTML基础dom操作相关的知识,希望对你有一定的参考价值。

DOM(Document Object Model)

  概念:一个WEB页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象,可以通过dom中提供的api方法,找到html的各个标签,通过找到标签就可以操作标签使页面动起来,让页面动起来。

 

一:查找元素

在一个页面中,如何拿到整体的页面,从而当作一个对象来进行操作呢?

页面右击-检查-console-输入:document-当前页面即可被当作一个对象进行操作

 

在document中的几种定位方式:

第一种:通过元素的ID进行定位;这种定位方式的前提是需要获取到元素的id

document.getElementById(‘这里是div的id这里是div的id这里是div的id‘)
返回信息:
<div class=?"inner" id=?"inner1">?<span>?input: ?</span>?<input type=?"text" placeholder=?"div的id是inner1">?</div>?

第二种: 通过class进行定位;

document.getElementsByClassName("这里是class的值这里是class的值这里是class的值")

第三种:通过div标签进行定位

document.getElementsByTagName("div")

 

找元素

step01:可以先把通过定位元素的某种方法赋予一个变量

var demo = document.getElementById(‘inner1‘)

step02:此时demo即是获取到的div信息;可通过变量赋予的方法去进行相应的操作,按照查看列表的方式去看有哪些元素

输入:demo.children
输出:HTMLCollection(2) [span, input]
     0: span
   1: input
   length: 2
   __proto__: HTMLCollection  

可以通过查询列表元素的方法去获取,比如获取span的信息,我们知道span在这里的角标是0,那么就是输入:

输入:demo.children[0]
获取到的span的信息:<span>?input:  ?</span>?

也可以利用变量方法去获取知晓第一个和最后一个元素是什么

demo.firstElementChild
<span>?input: ?</span>?

demo.lastElementChild
<input type=?"text" placeholder=?"div的id是inner1">?

 

通过当前的标签去获取兄弟标签的值,前提:假如当前的标签已经赋予了一个变量demo

获取当前标签的下一个兄弟标签:

获取下一个兄弟标签的div值:demo.nextElementSibling
输出:<div class=?"inner" id=?"inner2">?<span>?多行文本: ?</span>?<textarea onfocus id=?"t1" placeholder=?"id是t1">?</textarea>?</div>?

获取当前标签的上一个兄弟标签的div值:

demo.previousElementSibling
<h5>?value: 对input、textarea标签的内容进行获取或修改?</h5>?

查找当前标签的父级标签,也就是上级标签:

demo.parentElement

 

二:操作元素

1 innerHTML与innerText
输入利用innerText的方法:demo.innerText = "<input>"
"<input>"
demo
输出:<div class=?"inner" id=?"inner1">?<input>?</div>?
输入利用innerHTML的方法:demo.innerHTML = "<input>"
"<input>"
demo
输出:<div class=?"inner" id=?"inner1">?<input>?</div>?

区别:使用innerHTML和innerText的时候,如果负值的是符合浏览器能够识别的标签规则的话,那么HTML就会直接渲染成标签,而Text一 Iran会当成字符串

 

实现的效果如下,在框内被浏览器渲染成input的标签:

技术图片

 

进行框内参数的获取:

demo.lastElementChild.value

进行框内参数值的修改或者填写:

demo.lastElementChild.value = "这里是框内的内容"

2 textarea标签

var textarea = document.getElementById("t1")    通过id获取到定位,赋予变量
textarea.value = ‘123‘                          给textarea负值:123
textarea.value 查询textarea的值

3 select下拉框标签

var select = document.getElementById("s1")   定义变量
select.value     查看当前下拉框里面的值
select.value = "shenzhen"   修改框内值,如果修改的是不存在的,那么就是空
select.selectedIndex = 2    根据Index修改里面的值,如果是没有的index返回空

 

三 操作样式表-两种方法

前提:两个样式表,tmp1:红色;tmp2:黄色;默认有inner的样式 id=clst

第一种:通过更改标签class属性

var clst = document.getElementById("clst")    定义变量
clst.className = "inner tmp1"    操作更改已知属性样式

第二种:通过修改style标签进行内容的重写

clst.classList    拿到所有的属性,是一个列表
clst.classList.remove("tmp1")    操作列表里的样式:tmp1
clst.classList.add("tmp2")   通过列表进行添加样式
clst.style   获取到当前元素对应的css样式
clst.style.backgroundColor = "black"   通过style属性进行修改
clst.style.width = "100px"

clst.removeAttribute("style") 删除赋予的属性
 
style.backgroundColor  
css中样式可以通过【-】进行连接,在javascript中,所有的【-】都被去掉,【-】后面的第一个字符大写
 

四:创建标签

利用字符串的方法进行定义变量
var inputstr = ‘<input type ="text" value="郭等等通过字符串创建的标签" >‘
定位到当前创建标签的creat
creat = document.getElementById("create")  
父级标签内添加一个子标签字符串 
create.insertAdjacentHTML("beforeEnd",inputstr)

insertAdjacentHTML(where,tagStr): 父级标签内添加一个子标签字符串
beforeBegin: 插入到获取到标签的前面
afterBegin: 插入到获取到标签的子标签的前面
beforeEnd: 插入到获取到标签的子标签的后面
afterEnd: 插入到获取到标签的后面

 

以上是关于学习记录013-HTML基础dom操作的主要内容,如果未能解决你的问题,请参考以下文章

jquery学习记录四(操作DOM元素)

Dom操作基础

20180503 jq学习记录(jquery操作样式表,时间片,jq对象函数间传递)

Python入门基础学习记录汇率案例学习记录

前端学习记录 JS DOM

SQL Server基础操作(此随笔仅作为本人学习进度记录九!--游标)