JavaScript_在什么位置编写 JS 代码

最新推荐文章于 2024-04-08 13:03:22 发布

chance2015

最新推荐文章于 2024-04-08 13:03:22 发布

阅读量5k

点赞数 1

分类专栏： JavaScript_DOM编程 JavaScript学习大全文章标签： javascript html

本文链接：https://blog.csdn.net/chance2015/article/details/50462040

版权

JavaScript_DOM编程同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript学习大全

8 篇文章 4 订阅

订阅专栏

1.相关介绍

DOM：Document Object Model(文本对象模型)
D：文档 – html 文档或 xml 文档
O：对象 – document 对象的属性和方法
M：模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点（node）的层次。
DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合

查找元素节点

getElementById()

寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null。
var element = document.getElementById(ID);
该方法只能用于 document 对象

getElementsByTagName()

寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“content”);
var paras = container.getElementsByTagName(“p”);
alert(paras.length);

查找是否存在子节点

hasChildNodes()

该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

2.在什么位置编写JS代码

1）直接在html页面中书写代码

<body>
    <!-- HTML 代码和JS代码耦合在一起 -->>
    <button onclick = "alert('helloworld');">ClickMe</button>
</body>

缺点：
a. JS和HTML强耦合，不利于代码的维护
b.若click相应函数是比较复杂的，则需要先定义一个函数，然后再在onclick属性中晚餐对函数的引用，比较麻烦

2）一般的不能再body节点之前来直接获取body内的节点，因为此时HTML文档树还没加载完成，获取不到指点的节点

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
    //1.获取button
    var btns = document.getElementsByTagName("button");
    alert(btns.length);
</script>
</head>
<body>
    <button>ClickMe</button>

</body>
</html>

3）可以在整个html文档的最后编写js代码但这不符合习惯

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <button>ClickMe</button>
</body>
</html>
<!-- 在整个HTML文档被加载后，获取其中的节点，
把script 节点放在HTML文档的最后
但不符合写JS代码的习惯 -->
<script type ="text/javascript">
    //1.获取button
    var btns = document.getElementsByTagName("button");
    //2.为button添加onclick响应函数
    btns[0].onclick = function(){
        alert("hellowordl");
    }
</script>

4）一般的在body节点前编写js代码，但需要利用window。onload事件，该时间在当前文档完全加载之后诶触发

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type ="text/javascript">
    //window.onload事件在整个html文档被完全加载后触发执行
    //所以在其中可以获取到HTML文档的任何元素
    window.onload = function(){
            alert("helloworld");
        }
    }
</script>
</head>
<body>
    <button>ClickMe</button>
</body>
</html>

chance2015

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript_在什么位置编写 JS 代码

1.相关介绍DOM：Document Object Model(文本对象模型) D：文档 – html 文档或 xml 文档 O：对象 – document 对象的属性和方法 M：模型 DOM 是针对xml(html)的基于树的API。 DOM树:节点（node）的层次。 DOM 把一个文档表示为一棵家谱树（父，子，兄弟） DOM定义了Node的接口以及许多种节点类型来表示XML节
复制链接

扫一扫