js html() 操作,JS操作html元素认知

web.jpeg

JS有三部分组成

ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范

DOM：文档对象模型，处理网页的内容方法和接口(操作页面元素)

BOM ：浏览器对象模型，浏览器交互的方法和接口(操作浏览器)

JS操作html元素，其实就是操作DOM文档对象,整个html 文件就是是一个文档，那么这个文档看成一个文档对象，文档中的所有的标签都可以看成一个对象, 那么JS 是如何操作对象呢？

1.JS 中获取元素对象的方法

1. 1根据id从整个的文档中获取元素---返回的是一个元素对象

document.getElementById("id属性的值")

/*

在JS中

getElementById(元素的ID) 来获取元素 对象

*/

//获取元素对象

var box = document.getElementById("box");

//给元素对象 注册点击事件

box.onclick = function(){

this.style.backgroundColor = "red";

//设置div里面的内容

box.innerHTML = "

这是h2标签

";

}

image.png

1.2.根据标签的名字获取元素-----返回的是元素对象组成的伪数组

document.getElementsByTagName("标签的名字");

1.3这个几个有兼容性问题的 获取元素

1.根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 ---> ocument.getElementsByName("name属性的值")

2.根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 -->document.getElementsByClassName("类样式的名字")

3.根据选择器获取元素,返回来的是一个元素对象 -->document.querySelector("选择器的名字")

4.根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象---->document.querySelectorAll("选择器的名字")

我们通过JS获取到 元素对象目的就是修改里面的css样式或者之间的交互，那么如何更改样式属性呢?

image.png

从上面的例子中，我们看到，如果标签有直接的属性，只需要操作基本标签的属性，比如:src,title,alt,href,id属性 直接操作赋值

当然这样操作的基本标签属性，我们还可以通过 对象.style.属性=值; 这样的方式操作样式属性