1.在 html 文档的什么位置编写 js 代码 ?
一般地, 在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件, 该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点。
<!DOCTYPE html>
<html>
<head>
<title>TestJavaScriptDom.html</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
/*
* 一般地, 不能在 body 节点之前来直接获取 body 内的节点,
* 因为此时 html 文档树还没有加载完成,获取不到指定的节点。
*/
var btnNum = document.getElementsByTagName("button");
alert("按钮个数:" + btnNum.length);//弹出窗口打印结果 0.
/*
* window.onload 事件在整个 HTML 文档被完全加载后出发执行.
* 所以在其中可以获取到 HTML 文档的任何元素.
* 1. 当整个 HTML 文档完全加载成功后触发 window.onload 事件.
* 事件触发时, 执行后面 function 里边的函数体.
*/
window.onload = function() {
//2. 获取所有的 button 节点. 并取得第一个元素
var btn = document.getElementsByTagName("button")[0];
//3. 为 button 的 onclick 事件赋值: 当点击 button 时, 执行函数体
btn.onclick = function() {
//4. 弹出 helloworld
alert("helloworld");
}
}
</script>
</head>
<body>
<button>button1</button>
<!-- HTML 代码和 JS 代码耦合在一起. 不推荐 -->
<button onclick="alert('helloworld !!');">button2</button>
</body>
</html>
<!--
在整个 HTML 文档被加载后, 获取其中的节点.
把 script 节点放在 html 文档的最后
但不符合些 JS 代码的习惯.
-->
<script type="text/javascript">
//1. 获取 button
var btns = document.getElementsByTagName("button");
alert("按钮个数:" + btns.length);
//2. 为 button 添加 onclick 响应函数
btns[0].onclick = function() {
alert("helloworld!!!");
}
</script>
2. 获取指定的元素节点的三个方法
/*
* 1.根据 id 属性获取对应的单个节点,
* 在编写 HTML 文档时, 需确保 id 属性值是唯一的.
* 该方法为 document 对象的方法
*/
document.getElementById("IDName");
/*
* 2.使用标签名获取指定节点的集合.
*/
document.getElementsByTagName("TagName");
/*
* 3.根据节点的 name 属性获取符合条件的节点数组
*/
document.getElementsByName("Name");
3.获取属性节点的方法
通过元素节点 . 的方式来获取属性值和设置属性值.
//属性节点即为某一指定的元素节点的属性.
//1. 先获取指定的那个元素节点
var nameNode = document.getElementById("name");
//2. 再读取指定属性的值
alert(nameNode.value);
//3. 设置指定的属性的值.
nameNode.value = "newValue";
/*
* 或者通过getAttributeNode来获取属性节点
var nameAttr = nameNode.getAttributeNode("value");
alert(nameAttr);
alert("--" + nameAttr.nodeValue);
nameAttr.nodeValue = "newValue";
*/
4.获取元素节点的子节点的方法
//获取元素节点的子节点, 例获取 #city (<ul>)节点的所有子节点.
//1. 获取 #city 节点
var cityNode = document.getElementById("city");
//2. 利用元素节点的 childNodes 方法可以获取指定元素节点的所有子节点.
//但该方法不实用. 因为如果要获取指定的节点的指定子节点的集合, 可以直
//接调用元素节点的 getElementsByTagName() 方法来获取.
cityNode.childNodes;
//3. 获取 #city 节点的所有 li (<li>)子节点.
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//4. 获取指定节点的第一个子节点和最后一个子节点.
cityNode.firstChild;
cityNode.lastChild;
5.获取文本节点的方法
- 元素节点 --> 获取元素节点的子节点
- 若元素节点只有文本节点一个子节点,
例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>,
可以先获取到指定的元素节点 eleNode,然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值。//文本节点一定是元素节点的子节点. //1. 获取文本节点所在的元素节点 var bjNode = document.getElementById("IdName"); //2. 通过 firstChild 定义为到文本节点 var bjTextNode = bjNode.firstChild; //3. 通过操作文本节点的 nodeValue 属性来读写文本节点的值. alert(bjTextNode.nodeValue); bjTextNode.nodeValue = "newValue";
6.节点的属性
- .nodeName: 代表当前节点的名字,是只读属性.
如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 - .nodeType:返回一个整数, 这个数值代表着给定节点的类型.,是只读属性.
1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点 - .nodeValue:返回给定节点的当前值(字符串). 可读写的属性
①. 元素节点: 返回值是 null.
②. 属性节点: 返回值是这个属性的值
③. 文本节点: 返回值是这个文本节点的内容
7.创建一个元素节点
.createElement(): 按照给定的标签名创建一个新的元素节点.
方法只有一个参数:被创建的元素节点的名字, 是一个字符串.
方法的返回值:是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
8.为元素节点添加子节点
.appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点, 方法的返回值是一个指向新增子节点的引用指针.
9.创建一个文本节点
.createTextNode(): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针. 它是一个文本节点, 所以它的 nodeType 属性等于 3.方法只有一个参数:新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
//7、8、9例子
//1. document.createElement(elementTagName)
//新创建一个元素节点, 返回值为指向元素节点的引用
//<li></li>
var liNode = document.createElement("li");
//2. 创建 "厦门" 的文本节点
//document.createTextNode(string) 创建一个文本节点
//参数为文本值, 返回该文本节点的引用.
var xmText = document.createTextNode("厦门");
//<li>厦门</li>
liNode.appendChild(xmText);
10.节点的替换
- .replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针 - 该节点除了替换功能以外还有移动的功能.
- 该方法只能完成单向替换, 若需要使用双向替换, 需要自定义函数:
function replaceEach(aNode, bNode){ if(aNode == bNode){ return; } var aParentNode = aNode.parentNode; //若 aNode 有父节点 if(aParentNode){ var bParentNode = bNode.parentNode; //若 bNode 有父节点 if(bParentNode){ var tempNode = aNode.cloneNode(true); bParentNode.replaceChild(tempNode, bNode); aParentNode.replaceChild(bNode, aNode); } } }
11.删除节点
.removeChild(): 从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针. 某个节点被 removeChild() 方法删除时, 这个节点所包含的所有子节
点将同时被删除. 如果想删除某个节点, 但不知道它的父节点是哪一个, parentNode 属性可以帮忙。
12.插入节点
.insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是 element 元素的一个子节点。
13.innerHTML属性
浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容.