BOM编程_boom编程-CSDN博客

本文链接：https://blog.csdn.net/qq_62217605/article/details/123195250

BOM编程

BOM介绍
在js中获取HTML元素：
- 获得单一HTML元素：
- 获得HTML元素集合:
HTML元素上的常用事件：
HTML元素上的常用属性：
控制元素的显示(style)

BOM介绍

javascript组成：
ECMAScript
BOM（browser object model）：浏览器对象模型
DOM：文档对象模型

BOM是（ browser(浏览器) object(对象) model(模型) ）浏览器对象模型，今天我就带大家来学习一下BOM的编程小知识。

在js中获取HTML元素：

获得单一HTML元素：

document.getElementById() : 通过标签中的id属性

直接调用id的效果是一样的

<body>
<p id="test">测试</p>
<script>
//下面是两种获得id属性的方法(效果相同)
var x1=document.getElementById("test").textContent
var x2=text.textContent
</script>
</body>

获得HTML元素集合:

集合的长度会随着页面元素的增删而变化

document.getElementsByTagName() : 通过标签名

document.getElementsByClassName() : 通过标签中的class属性

document.getElementsByName() ：通过标签中的name属性

<body>
<p id="test" class="cls" name="mz">测试</p>
<script>
    //下面三种方法拿到的都是上面定义的p标签
    document.getElementsByTagName("p")//通过标签名
    document.getElementsByClassName("cls")//通过标签中的class属性
    document.getElementsByName("mz")//通过标签中的name属性
</script>
</body>

HTML元素上的常用事件：

onclick : 点击事件

ondblclick : 双击事件

onfocus : 获得焦点事件

onblur : 失去焦点事件

onmouseover : 鼠标移入

onmouseout : 鼠标移出

直接在标签里面定义一个事件和在script中增加一个事件的效果是一样的
事件只能被标签使用

<body>
//直接在标签里面定义一个事件和在script中增加一个事件的效果是一样的
//事件只能被标签使用
<p id="test" onclick="" ondblclick="">测试</p> <!--引号里面放js函数-->
<script>
    text.onfocus="" //引号里面放js函数
    text.onblur="" //引号里面放js函数
    text.onmouseover="" //引号里面放js函数
    text.onmouseout="" //引号里面放js函数
</script>
</body>

HTML元素上的常用属性：

textContent : 标签的文本内容(标签中定义的标签不生效)

InnerHTML : 标签中的html内容(标签中定义的标签会生效)

value : 元素的值(适用具备value属性的元素)

checked ：是否被选中(单选框,多选框)

style : 标签中的style属性(用于设置样式)

<body>
<input id="test" type="checkbox">
<input type="text" id="txt">
<script>
    test.textContent//标签的文本内容(标签中定义的标签不生效)
    test.innerHTML//标签中的html内容(标签中定义的标签会生效)
    test.checked//元素的值(适用具备value属性的元素)
    test.style//是否被选中(单选框,多选框)
    txt.value//标签中的style属性(用于设置样式)
</script>
</body>

控制元素的显示(style)

display：

none : 不显示(页面不会有空间)

block : 以块状元素显示

inline : 以行内元素显示

inline-block : 以行块显示

<body>
<span id="s">1</span>
<script>
s.style.display="none"//不显示(不会占据页面空间)
s.style.display="block"//以块状(不管多大，占一整行，不填大小填满一行)元素显示
s.style.display="inline"//以行内(不管多大，都不跨行，填了大小也不会改变)元素显示
s.style.display="inline-block"//以行块(既保留大小，也不会跨行)显示
</script>
</body>

visibility：

visible ：可见

hidden : 不可见(会占据页面空间)

<body>
<span id="s">1</span>
<script>
    s.style.visibility="visible"//可见
    s.style.visibility="hidden"//不可见(会占据页面空间)
</script>
</body>

**opacity：**用于控制元素的透明度，0~1之间的值，数字越大越清晰

<body>
<span id="s">1</span>
<script>
s.style.opacity=1//填数字(0~1之间，包括0和1)，数字越大越清晰
</script>
</body>

以上就是本文所有的内容了，谢谢观看，我之后还会写一些与HTML相关的文章，喜欢的可以点个赞+关注。

BOM编程

BOM编程

BOM介绍

在js中获取HTML元素：

获得单一HTML元素：

获得HTML元素集合:

HTML元素上的常用事件：

HTML元素上的常用属性：

控制元素的显示(style)

“相关推荐”对你有帮助么？