javascriptDom操作

最新推荐文章于 2024-03-14 19:32:21 发布

酱爆小饼干

最新推荐文章于 2024-03-14 19:32:21 发布

阅读量332

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u011472830/article/details/52741049

版权

js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

获取元素节点

根据ID获取元素节点

document.getElementById(" ");

getElements***的选择器返回的是一个NodeList对象，能根据引索号选择其中一个，可以遍历输出。

根据name获得元素节点

document,getElementsByName(" ");

根据HTML标签签名获取元素节点

document.getElementsByName( );

根据class获取元素节点

document.getElementsByClassName();

javascript中的css选择器

document.querySelector(); //根据css选择器的规则，返回第一个匹配到的元素
document.querySelectorAll();//根据css选择器的规则，返回所以匹配到的元素


<div id="div1">
    <p id="p1" class="class1">
        我是第一个P</p>
    <p id="p2" class="class2">
        我是第二个P</p>
</div>

    window.onload = function () {
        var node = document.querySelector("#div1 > p");    
        alert(node.innerHTML);                //输出  我是第一个P

        var node1 = document.querySelector(".class2");
        alert(node1.innerHTML);                //输出  我是第二个P

        var nodelist = document.querySelectorAll("p");
        alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML);    //输出  我是第一个P - 我是第二个P
    }

文档结构和遍历

（1）作为节点树的文档
1. parentNode 获取该节点的父节点
2. childNodes 获取该节点的子节点数组
3. firstChild 获取该节点的第一个子节点
4. lastChild 获取该节点的最后一个子节点
5. nextSibling 获取该节点的下一个兄弟元素
6. previoursSibling 获取该节点上的一个兄弟元素
7. nodeType 节点的类型

类型	值	说明
ELEMENT_NODE	1	元素节点 *
ATTRIBUTE_NODE	2	属性节点 *
text_NODE	3	文本节点 *
CDATA_SECTION_NODE	4	CDATA 区段
ENTITY_REFERENCE_NODE	5	实体引用
ENTITY_NODE	6	实体
PROCESSING_INSTRUCTION_NODE	7	处理指令
COMMENT_NODE	8	注释节点 *
DOCUMENT_NODE	9	文档节点 *

8. nodeVlue Text节点或Comment节点的文本内容。
9. nodeName 元素的标签名（如P,SPAN,#TEXT(文本节点)，DIV）,以大写形式表示

注意：以上6个方法元素节点也算一个节点。

<!DOCTYPE html>
<html>
<body><p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var txt="";
var c=document.body.childNodes;
for (i=0; i<c.length; i++)
  {
  txt=txt + c[i].nodeName + "<br>";
  };
var x=document.getElementById("demo");  
x.innerHTML=txt;
}
</script>

<p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p>

</body>
</html>

输出：

P
#text
BUTTON
#text
SCRIPT
#text
P
#text

注释：元素中的空格被视为文本，而文本被视为节点。

（2）作为元素树的文档
1. firstElementChild 第一个子元素节点
2. lastElementChild 最后一个子元素节点
3. nextElementSibling 下一个兄弟元素节点
4. previousElementSibling 前一个兄弟元素节点
5. childElementCount 子元素节点数量

注意，此五个方法文本节点不算进去

<div id="div1">
            <p id="p1" class="class1">
                我是第一个P</p>
            <p id="p2" class="class2">
                我是第二个P</p>
      </div>

    window.onload = function () {
        var node = document.getElementById("div1");
        var node1 = node.firstElementChild;
        var node2 = node.lastElementChild;

        alert(node.childElementCount);  //输出2，div1一共有两个非文档子元素节点
        alert(node1.innerHTML);         //输出 我是第一个P
        alert(node2.innerHTML);         //输出 我是第二个P
        alert(node2.previousElementSibling.innerHTML);  //输出 我是第一个P(第二个元素节点的上一个非文本元素节点是P1)
        alert(node1.nextElementSibling.innerHTML);      //输出 我是第二个P(第一个元素节点的下一个兄弟非文本节点是P2)
    }

属性获取与设置

javascript操作HTML属性

html标准属性

属性	值	描述
accesskey	character	规定访问元素的键盘快捷键
class	classname	规定元素的类名（用于规定样式表中的类）。
contenteditable	true false	规定是否允许用户编辑内容。
contextmenu	menu_id	规定元素的上下文菜单。
data-yourvalue	value	创作者定义的属性。HTML 文档的创作者可以定义他们自己的属性。必须以 “data-” 开头。
dir	ltr rtl	规定元素中内容的文本方向。
draggable	true false auto	规定是否允许用户拖动元素。
hidden	hidden	规定该元素是无关的。被隐藏的元素不会显示。
id	id	规定元素的唯一 ID。
item	empty url	用于组合元素。
itemprop	url group value	用于组合项目。
lang	language_code	规定元素中内容的语言代码。语言代码参考手册。
spellcheck	true false	规定是否必须对元素进行拼写或语法检查。
style	style_definition	规定元素的行内样式。
subject	id	规定元素对应的项目。
tabindex	number	规定元素的 tab 键控制次序。
title	text	规定有关元素的额外信息。

属性的读取，【节点.属性；】此处要注意的是，某些HTML属性名称在javascript之中是保留字，因此会有些许不同，如class,lable中的for在javascript中变为htmlFor,className.

<div id="div1">
        <p id="p1" class="class1"> 我是第一个P</p>
        <img src="123.jpg" alt="我是一张图片" id="img1" />
        <input type="text" value="我是一个文本框" id="input1" />
    </div>

    window.onload = function () {
        var nodeText = document.getElementById("input1");
        alert(nodeText.value);        //输出 我是一个文本框
        var nodeImg = document.getElementById("img1");
        alert(nodeImg.alt);            //输出 我是一张图片
        var nodeP = document.getElementById("p1");
        alert(nodeP.className);        //输出 class1    注意获取class是className，如果写成nodeP.class则输出undefined

属性的设置,【节点.属性=”“；】此处同样要注意的事保留字

<div id="div1">
            <img src="1big.jpg" alt="我是一张图片" id="img1" onclick="fun1()" />
        </div>

    function fun1() {
            document.getElementById("img1").src = "1small.jpg";        //改变图片的路径属性。实现的效果为，当点击图片时，大图变小图。
        }

非标准HTML属性

getAtrribute();
setAttribute();//注意这两个方法是不必理会javascript保留字的，HTML属性是什么就怎么写。

    <div id="div1">
            <img src="1big.jpg" alt="我是一张图片" class="imgClass" id="img1" onclick="fun1()" />
        </div>

    function fun1() {
            document.getElementById("img1").setAttribute("src", "1small.jpg");
            alert(document.getElementById("img1").getAttribute("class"));
        }

Attr节点的属性获取

attributes属性非Element对象返回null，Element一半返回Attr对象。Attr对象是一个特殊的Node,通过name与value获取属性名称与值。
如:document.getElementById(“img1”)[0];
document.getElementById(“img1”).src;

<div id="div1">
            <img src="1big.jpg" alt="我是一张图片" class="imgClass" id="img1" onclick="fun1()" />
        </div>

    function fun1() {
            alert(document.getElementById("img1").attributes[0].name);    //输出  onclick    注意，通过索引器访问是写在右面在排前面，从0开始
            alert(document.getElementById("img1").attributes.src.value);    //输出1big.jpg
            document.getElementById("img1").attributes.src.value = "1small.jpg";    //点击后改变src属性，实现了点击大图变小图效果
        }

javascript操作元素css

通过元素的style属性可以随意读取和设置元素的CSS样式，例子：

<head>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            alert(document.getElementById("div1").style.backgroundColor);
            document.getElementById("div1").style.backgroundColor = "yellow";
        }
    </script>
</head>
<body>
    <div id="div1" style="width:100px; height:100px; background-color:red"></div>
</body>

设置和获取元素节点的内容

元素的内容
1. innerText、textContent innerText与textContent的区别，当文本为空时，innerText是”“，而textContent是undefined
2. innerHTML innerHTML与innerText的区别，就是对HTML代码的输出方式Text不会输出HTML代码

    <div id="div1">
                <p id="p1">我是第一个P</p>
                <p id="p2">我是第<b>二</b>个P</p>
            </div>

        window.onload = function () {
                alert(document.getElementById("p1").innerText);  //注意火狐浏览器不支持innerText
                alert(document.getElementById("p1").textContent);    //基本都支持textContent
                document.getElementById("p1").textContent = "我是p1，javascript改变了我";    //设置文档Text
                alert(document.getElementById("p2").textContent);
                alert(document.getElementById("p2").innerHTML); //innerHTML与innerText的区别，就是对HTML代码的输出方式Text不会输出HTML代码
            }

创建，插入，删除节点

创建文本节点
document.createTextNode();

    <div id="div1">
                <p id="p1">我是第一个P</p>
                <p id="p2">我是第二个P</p>
            </div>

        window.onload = function () {
                var textNode = document.createTextNode("<p>我是一个javascript新建的节点</p>");
                document.getElementById("div1").appendChild(textNode);
            }

完成后HTML变为：

 < div id="div1">
        <p id="p1">我是第一个P</p>
        <p id="p2">我是第二个P</p>
        我是一个javascript新建的节点
    </div>

创建元素节点
document.createElement()

 <div id="div1">
            <p id="p1">我是第一个P</p>
            <p id="p2">我是第二个P</p>
        </div>

    window.onload = function () {
            var pNode = document.createElement("p");
            pNode.textContent = "新建一个P节点";
            document.getElementById("div1").appendChild(pNode);
        }

执行之后HTML代码变为：

<div id="div1">
    <p id="p1">我是第一个P</p>
    <p id="p2">我是第二个P</p>
    <p>新建一个P节点</p>
</div>

插入节点

appendChild(); //将一个节点插入到调用节点的最后面
insertBefore(); //接受两个参数，第一个为待插入的节点，第二个指明在哪个节点前面，如果不传入第二个参数，则跟appendChild一样，放在最后。

<div id="div1">
            <p id="p1">我是第一个P</p>
        </div>

    window.onload = function () {
            var pNode1 = document.createElement("p");
            pNode1.textContent = "insertBefore插入的节点";
            var pNode2 = document.createElement("p");
            pNode2.textContent = "appendChild插入的节点";
            document.getElementById("div1").appendChild(pNode2);
            document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1"));
        }

执行之后HTML代码为：

  <div id="div1">
    <p>insertBefore插入的节点</p>
    <p id="p1">我是第一个P</p>
    <p>appendChild插入的节点</p>
 </div>

注意：插入的是已存在的节点，也可以称之为移动。

删除和替换节点
removeChild(); 由父元素调用，删除一个子节点。注意是直接父元素调用，删除直接子元素才有效，删除孙子元素就没有效果了。

<div id="div1">
            <p id="p1">我是第一个P</p>
            <p id="p2">我是第二个P</p>
        </div>

    window.onload = function () {
            var div1 = document.getElementById("div1");
            div1.removeChild(document.getElementById("p2"));
        }

执行之后代码变为：

    <div id="div1">
        <p id="p1">我是第一个P</p>  //注意到第二个P元素已经被移除了
     </div>

replaceChild（） //删除一个子节点，并用一个新节点代替它，第一个参数为新建的节点，第二个节点为被替换的节点

<div id="div1">
            <p id="p1">我是第一个P</p>
            <p id="p2">我是第二个P</p>
        </div>

    window.onload = function () {
            var div1 = document.getElementById("div1");
            var span1 = document.createElement("span");
            span1.textContent = "我是一个新建的span";
            div1.replaceChild(span1,document.getElementById("p2"));
        }

执行完成后HTML代码变为：

<div id="div1">
    <p id="p1">我是第一个P</p>
    <span>我是一个新建的span</span>    //留意到p2节点已经被替换为span1节点了
</div>

Document对象集合

@(Document对象)

集合	描述
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

all[]

语法

document.all[i]
document.all[name]
document.all.tags[tagname]

说明

all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。

all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。

all[] 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all[] 数组，根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。

forms[]

语法

document.forms[]

<html>
<body>

<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>

<script type="text/javascript">
document.write("This document contains: ")
document.write(document.forms.length + " forms.")
</script>

</body>
</html>