2020年前端学习入门系列:DOM

时间:2020-03-09 12:05:59 来源:网络

【摘要】 前端开发是创建Web页面或app等前端界面实现互联网产品的用户界面交互。考必过为大家整理了2020年前端学习入门系列:DOM,想学习前端的小伙伴可以看过来!2020年前端学习入门系列:DOM。

DOM

选择器

直接查找

document.getElementById 根据ID获取一个标签

document.getElementsByClassName 根据class属性获取(可以获取多个元素,所以返回的是一个数组)

document.getElementsByTagName 根据标签名获取标签合集

示例:

待到将军归来日,朕与将军解战袍!

日照香炉生紫烟,遥看瀑布挂前川!

var a = document.getElementById('d1'); # 获取id属性值为d1的标签 拿到的直接是标签对象

var a = document.getElementsByClassName('c1'); #获取class值为c1的所有标签 拿到的是数组

var a = document.getElementsByTagName('div'); #获取所有div标签 拿到的是数组

间接查找

var a = document.getElementById('d1');

a.parentElement; #获取a这个标签的父级标签.

children 所有子标签

firstElementChild 第一个子标签元素

lastElementChild 最后一个子标签元素

nextElementSibling 下一个兄弟标签元素

previousElementSibling 上一个兄弟标签元素

节点操作

创建节点(创建标签)

var a = document.createElement('标签名称');

示例,创建a标签

var a = document.createElement('a');

var dd = document.getElementById('dd'); 找到div标签

添加节点

#添加节点,添加到了最后

父级标签.appchild(要添加节点)

dd.appendChild(a);将创建的a标签添加到dd这个div标签里面的最后.

#在某个节点前面添加节点

父级标签.insertBefore(新标签,某个儿子标签)

示例

var dd = document.getElementById('dd'); #找到父级标签

var a = document.createElement('a'); #创建一个新的a标签

var d2 = dd.children[1]; #找到父级标签下的某个儿子标签

dd.insertBefore(a,d2); #将a标签插入到上面这个儿子标签的前面.

删除节点

dd.removeChild(d2); 父级标签中删除子标签

替换节点

var dd = document.getElementById('dd'); #找到父级标签

var a = document.createElement('a'); #创建a标签

a.innerText = '百度';

var d1 = dd.children[0]; #找到要被替换的子标签

dd.replaceChild(a,d1); #替换

文本操作

d1.innerText; 查看

var divEle = document.getElementById("d1")

divEle.innerText #输入这个指令,一执行就能获取该标签和内部所有标签的文本内容

divEle.innerHTML #获取的是该标签内的所有内容,包括文本和标签

设置:

d1.innerText = "百度";

d1.innerHTML = "百度"; 能够识别标签

属性操作

var divEle = document.getElementById("d1");

divEle.setAttribute("age","18") #比较规范的写法

divEle.getAttribute("age")

divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置,如果是你自定义的属性,是不能通过.来获取属性值的

imgEle.src

imgEle.src="..."

值操作

var inp = document.getElementById('username');

inp.value; #查看值

inp.value = 'taibai'; #设置值

select标签.value

select标签.value=option标签的value属性值 这个标签就被选中了

var inp = document.getElementById('city');

inp.value; #查看值

inp.value = '1'; #设置值

class的操作

var d = document.getElementById('oo');

d.classList; #获得这个标签的class属性的所有的值

d.classList.add('xx2'); #添加class值

d.classList.remove('xx2'); #删除class值

d.classList.contains('xx2'); #判断是否有某个class值,有返回true,没有返回false

d.classList.toggle('xx2'); #有就删除,没有就增加

css操作

var d = document.getElementById('oo');

d.style.backgroundColor = 'deeppink'; 有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写

d.style.height = '1000px'

事件

onclick 当用户点击某个对象时调用的事件句柄。

ondblclick 当用户双击某个对象时调用的事件句柄。

onfocus 元素获得焦点。 // 练习:输入框

onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

onkeypress 某个键盘按键被按下并松开。

onkeyup 某个键盘按键被松开。

onload 一张页面或一幅图像完成加载。

onmousedown 鼠标按钮被按下。

onmousemove 鼠标被移动。

onmouseout 鼠标从某元素移开。

onmouseover 鼠标移到某元素之上。

onselect 在文本框中的文本被选中时发生。

onsubmit 确认按钮被点击,使用的对象是form。

绑定事件的方式有两种

方式1:

方式2

var d = document.getElementById('d1');

d.onclick = function () {

d.style.backgroundColor = 'yellow';

}

事件里面的this

绑定方式1:

this表示当前标签对象

function f1(ths) {

// var d = document.getElementById('d1');

// d.style.backgroundColor = 'yellow';

ths.style.backgroundColor = 'yellow';

var d = document.getElementById('d2');

d.style.backgroundColor = 'yellow';

}

方式2:

var d = document.getElementById('d1');

d.onclick = function () {

this.style.backgroundColor = 'yellow';

// d.style.backgroundColor = 'yellow'; //this表示当前标签对象

}

onblur和onfocus事件

var inp = document.getElementById('username');

inp.onfocus = function () {

var d = document.getElementById('d1');

d.style.backgroundColor = 'pink';

};

// onblur 失去光标时触发的事件

inp.onblur = function () {

var d = document.getElementById('d1');

d.style.backgroundColor = 'green';

};

onchange事件,域内容发生变化时触发

// onchange事件,内容发生变化时触发的事件

var s = document.getElementById('jishi');

s.onchange = function () {

//this.options select标签的所有的option标签

//this.selectedIndex被选中的标签在所有标签中的索引值

console.log(this.options[this.selectedIndex].innerText + '搓的舒服');

}

//input标签绑定onchange事件

var inp = document.getElementById('username');

inp.onchange = function () {

console.log(this.value);

};

以上就是2020年前端学习入门系列:DOM的详细内容,希望本篇文章对大家有所帮助。虽然考试已经受到影响,但是考生们不能因此懈怠。我们将根据疫情防控的进展情况,动态更新并通知考试的报名和考试安排,更多资讯关注考必过网站。

上一篇      下一篇
前端相关推荐 更多>>
前端热点专题 更多>>
热点问答
国家公务员考试年龄限制是多少 公务员国考和省考考试内容有什么区别 函授大专学历能不能考公务员 国家公务员考试考点能自己选择吗 新闻学专业能报考2022年公务员考试吗 什么是联合培养研究生 什么是破格录取研究生 什么人不适合读研 研究生报名户口所在地填什么 研究生结业和毕业有什么区别
网站首页 网站地图 返回顶部
考必过移动版 https://m.kaobiguo.net