DOM第二章操作HTML

最新推荐文章于 2022-09-16 22:11:34 发布

小刘的前端之路

最新推荐文章于 2022-09-16 22:11:34 发布

阅读量221

点赞数

分类专栏： JS新篇文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/liuzizhoufaith/article/details/124117589

版权

JS新篇专栏收录该内容

7 篇文章 1 订阅

订阅专栏

第二章 DOM操作HTML

第一讲.DOM简介

DOM:文档对象模型

JS通过DOM来对HTML文档,只要理解了DOM就可以随心所欲的操作web页面

文档:一个网页就是一个文档

对象:将网页的每一个部分(或大或小)都转化成对象

模型:使用模型来表示对象之间的关系,这样方便我们获取对象

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        <a href='1.html'>超链接</a>
    </body>
</html>

则这个文档的模型为:

文档->html->head->title->文本节点

->body->a->文本节点

模型可以体现出节点与节点的关系

节点:是网页的基本组成部分,网页中的每一个部分都可以称为一个节点

常用的节点分为四类:

文档节点:整个html网页

节点名:document 节点类型:9 节点值:null
元素节点:html文档中的标签

节点名:标签名节点类型:1 节点值:null
属性节点:元素的属性用的不多

节点名:属性名节点类型:2 节点值:属性值
文本节点:html标签中的文本内容

节点名:text 节点类型:3 节点值:文本内容

浏览器为我们提供了文档节点对象,可以在页面中使用,它代表的是整个网页

console.log(document);

获取对象的方法:

<button id='a'>我是按钮</button>

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

修改按钮的文字:

.innerHTML可以获取到节点内部的html代码

btn.innerHTML="I'm button";

第二讲.事件简介

事件:文档和浏览器窗口发生的一些特定的交互瞬间,是用户和浏览器的交互行为

js和html的交互是通过事件实现的

处理事件:在事件对应的属性中,设置一些js代码,这样在事件被触发时,js代码将会执行

<button id='a' onclick="alert('讨厌')">我是按钮</button>

这种写法称为结构和行为耦合,不推荐使用

可以为按钮的对应事件绑定一个处理函数,然后以函数的形式响应事件.这是推荐使用的方式

var btn=document.getElementById('a');
btn.onclick=function(){
    alert('你还点');
}

当事件被触发时,其对应的函数将被调用.

像这种为单击事件绑定的函数,称为单机响应函数

浏览器在加载页面时,是自上向下加载,读取一行就运行一行,如果将script,则代码执行时,页面还没有加载

因此要将js代码写在最后.但是如果就是想写在上面

onload事件在页面加载完成之后才能出发

要为window绑定onload事件

window.onload=function(){
    alert('hello');
}

这样这个函数只有在页面加载完成之后才会执行

因此,如果想把js写在head中,就要将代码统一写到上面的函数里,这样可以确保代码执行时,所有的dom对象都已经加载完毕.

实际开发中,都是写在最下面

第三讲.获取元素节点

通过document对象调用

getElementById( )

通过id属性获取一个元素节点对象
getElementsByTagName( )

通过标签名获取一组元素节点对象

会返回一个类数组对象,所查询到的元素都会封装到对象中,这个对象的每一个数组值为一个节点
getElementsByName( )

通过name属性获取一组节点对象

innerHTML用于获取元素内部的HTML代码,但是无法获取自结束标签的信息

如果需要读取元素节点的属性,可以直接:元素.属性名

var inputs=getElementsByName('a');
for(var i=0;i<inputs.length;i++){
    alert(inputs[i].value);
}

注意:class属性不能采用写class,因为class是js的保留字,要用元素.className

第四讲.获取子节点

通过具体的元素节点调用

方法:getElemtByTagName( )

属性:

childNodes 表示当前节点的所有子节点

它会获取文本节点在内的所有子节点

根据dom标准,标签间的空白也会被识别成文本节点
firstChild 表示当前节点的第一个子节点

一般情况下也是获取空白
lastChild 表示当前节点的最后一个子节点

一般情况下也是获取空白
children 表示当前元素的所有子元素(只有标签,没有烦人的空白文本)
firstElementchild 获取第一个子元素

不支持ie8以下

var city=document.getElementsById('city');
var lis=city.getElementsById('li');
var cns=city.childNodes;
var cns=city.children;

第五讲.获取父节点和兄弟节点

通过具体的节点调用

属性:

parentNode 表示当前节点的父节点
previousSibling 表示当前节点的前一个兄弟节点

节点不是元素,你懂的
nextSibling 表示当前节点的后一个兄弟节点
previousElementSibling 表示当前节点的前一个兄弟元素

定义一个函数,专门为指定的元素绑定单击指定函数

function myClick(idStr,fun){
    var btn=document.getElementById(idStr);
    btn.onclick=fun;
}
myClick('btn07',function(){
	var city=document,getElementById('bj');
    var pn=city.parenrNode;
    alert(pn);
})