DOM 即就是: Document Object Model(文档对象模型):
那么 JavaScript 如何获得网页元素并进行操作呢??? 通过节点.
1.getElement 系列访问指定节点:
- getElementById()
- getElementsByName()
- getElementsByTagName()
2. 节点的属性:
parentNode: 返回节点的父节点
childNodes: 返回子节点集合
firstChild: 返回节点的第一个子节点
lastChild: 返回节点的最后一个结点
nextSibling: 下一个节点
previousSibling: 上一个节点
3.element 的属性:
firstElementChild: 返回节点的第一个子节点
lastElementChild: 返回节点的最后一个结点
nextElementChild: 下一个结点
previousElementSibling: 上一个节点
4. 节点信息:
nodeName: 节点名称
nodeValue: 节点值
nodeType: 节点类型
元素 element (NodeType 值)1
属性 attr 2
文本 text 3
注释 comments 8
文档 document 9
一些代码实例:
1. 节点的访问测试:
lastchild: 会返回一个 [Object Text] 类型
lastElementChild: 会返回一个[Object HTMLElement]
[Object Text]: 文本对象, 无法直接写入网页, 会出现一个未定义;
[Object HTMLElement]: 网页元素对象, 调用 innerHTML 可以直接写入网页;
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <!--
- document.write : 只能写入 Html 元素
- [Object Text] : 文本对象, 无法直接写入网页, 会出现一个 未定义
- [Object HTMLElement]: 网页元素对象, 调用 innerHTML 可以直接写入网页(Html 的形式)
- lastchild: 会返回一个 [Object Text] 类型
- -->
- <body>
- <section id="id1">
- <ul>
- <li><a href="">1</a></li>
- <li><a href="">2</a></li>
- <li><a href="">3</a></li>
- <li><a href="">4</a></li>
- <li><a href="">5</a></li>
- <li><a href="">6</a></li>
- </ul>
- </section>
- <script>
- var a=document.getElementById("id1").lastElementChild.lastChild.parentElement;
- console.log(a);
- document.writeln(a.innerHTML);
- document.writeln(a);
- </script>
- </body>
- </HTML>
2. 获得和修改节点 的属性:
eg: 修改 a 标签的 src 属性;
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <a href="#" id="a" style="">啦啦啦啦</a>
- <script>
- var a=document.getElementById("a").getAttribute("href");
- document.getElementById("a").setAttribute("href","https://www.baidu.com");
- a=document.getElementById("a").getAttribute("href");
- console.log(a);
- document.getElementById("a").setAttribute("style","border: 2px solid red");
- </script>
- </body>
- </HTML>
3. 创建和插入节点的测试:
- //A.appendChild(B) 在 a 的后面追加 b
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <p id="pp">请选择你喜欢的书籍: 剑指 Offer<input type="radio" name="book" onclick="book()">
- JVM<input type="radio" name="book" onclick="book()">
- </p>
- <div></div>
- <script>
- // document.getElementById("1");
- // 获得的都是[Object htmlelement]
- function book() {
- var a=document.getElementsByName("book");
- //console.log(a); //a 是一个数组, a[0]--JVM a[1]-- 剑指 offer
- var b=document.getElementsByTagName("div")[0];
- //[0]--div 标签里面的内容
- var img=document.createElement("img");
- // 创建的元素对象
- if(a[0].checked){
- img.setAttribute("src","images/1.png");
- img.setAttribute("alt","JVM");
- //A.appendChild(B) 在 a 的后面添加 b
- b.appendChild(img);
- // 添加指定的元素
- }
- if(a[1].checked){
- img.setAttribute("src","images/2.png");
- img.setAttribute("alt","剑指 Offer");
- b.appendChild(img);
- }
- }
- </script>
- </body>
- </HTML>
4. 对选中元素进行修改和删除:
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <p>
- <img src="images/1.png" alt="Jvm" id="p1">
- <input type="button" value="删除我" onclick="del()">
- </p>
- <p>
- <img src="images/2.png" alt="剑指 Offer" id="p2">
- <input type="button" value="替换我" onclick="rep()">
- </p>
- <script>
- function del() {
- var par=document.getElementById("p1").parentElement;
- //removeChild(子节点)
- par.removeChild(par.firstChild);
- console.log(par.firstChild);
- }
- function rep() {
- var old=document.getElementById("p2");
- // 修改路径直接替换
- //old.setAttribute("src","images/1.png");
- var newp=document.createElement("img");
- newp.setAttribute("src","images/1.png");
- old.parentNode.replaceChild(newp,old);
- }
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3105565.html