DOM

不念不忘少年蓝@ 2022-09-30 03:49 86阅读 0赞

# HTML DOM Document对象 #

DOM 是 Document Object Model（文档对象模型）的缩写。

1.**document.body**

返回文档的body元素

2.**document.createAttribute()**

创建一个属性节点

var att=document.createAttribute("class");
    att.value="democlass";
    document.getElementsByTagName("H1")[0].setAttributeNode(att);

3.**document.createElement()**

创建元素节点

var btn=document.createElement("p");

4.**document.createTextNode()**

创建文本节点

var btn=document.createTextNode("Hello World");

5.**document.getElementsByClassName()**

返回文档中所有指定类名的元素集合，最为NodeList对象

var x = document.getElementsByClassName("example");

NodeList对象，可以通过节点列表中的节点索引号来访问列表中的节点（索引号从0开始）

可以使用NodeList对象的length属性来确定指定类名元素的个数。

获取包含example和color类名的所有元素

var x=document.getElementsByClassName("example color");

查看文档中有多少个样式 class=”example” 的元素

var x = document.getElementsByClassName("example").length;

6.**document.getElementById()**

返回对拥有指定id的第一个对象的引用

如果没有指定id的元素返回null，如果存在多个指定id元素则返回undefined

document.getElementById("demo");

7.**document.getElementsByName()**

返回带有指定名称的对象集合（指的是元素的name属性）

var x=document.getElementsByName("x");

8.**document.getElementsByTagName()**

返回带有指定标签名的对象集合

document.getElementsByTagName("p");

9.**document.querySelector()**

返回文档中匹配指定CSS选择器的一个元素。对于多个选择器，使用逗号隔开

//获取文档中id="demo"的第一个元素
    document.querySelector("#demo");
    
    //获取文档中第一个 <p> 元素
    document.querySelector("p");
    
    //获取文档中 class="example" 的第一个元素
    document.querySelector(".example");

10.**document.querySelectorAll()**

document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表

11.**document.write()**

向文档写入HTML表达式或JavaScript代码

document.write("Hello World!");
    document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");//不会显示html标签

12.**document.writeln()**

等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

13.

# HTML DOM 元素对象 #

1.element.appendChild()

为元素添加一个新的子元素

var node=document.getElementById("myList2").lastChild;
    document.getElementById("myList1").appendChild(node);

2.element.childNodes

返回元素的子节点的数组

var c=document.body.childNodes;

3.element.firstChild

返回元素的第一个子节点

4.**element.focus()**

设置文档或元素获取焦点

document.getElementById("myAnchor").focus();

5.*element*.getAttribute(*attributename*)

返回指定元素的属性值

//获取链接的 target 属性值
    document.getElementsByTagName("a")[0].getAttribute("target");
    
    vare paras=document.getElementsByTagName("p");
    for(var i=0;i<paras.length;i++){ 
        alert(paras[i].getAttribute("title"));
    }

6.element.getElementsByTagName()

返回指定标签名的所有子元素集合

var list=document.getElementsByTagName("ul")[0]

7.element.getElementsByClassName()

返回文档中所有指定类名的元素集合，作为 NodeList 对象。

var list = document.getElementsByClassName("example")[0];

8.element.innerHTML

设置或者返回元素的内容

document.getElementById('myAnchor').innerHTML="W3Cschool";

9.element.insertBefore()

将一个新元素插入到一个现有元素的前面

新元素：想要插入的元素（newElement）

目标元素：你想把这个新元素插入到哪个元素（targetElement）之前

父元素：目标元素的父元素（parentElement）

parentElement.insertBefore(newElement,targetElement)

var gallery=document.getElementById(“imagegallery”);

gallery.parentNode.insertBefore(placeholder,gallery);

10.element.lastChild

返回其最后一个子元素

document.getElementById("myList").lastChild;

11.element.nextSibling

返回某个元素之后紧跟的节点

document.getElementById("item1").nextSibling;

12.element.nodeName

返回元素的标记名（大写）

13.element.nodeType

元素节点 1

属性节点 2

文本节点 3

返回元素的节点类型

14.element.nodeValue

返回元素的节点值

document.getElementsByTagName("BUTTON")[0].childNodes[0].nodeValue;

15.element.parentNode

返回元素的父节点

document.getElementById("item1").parentNode;

16.element.previousSibling

返回某个元素紧接之前元素

17.element.querySelector()

返回匹配指定CSS选择器元素的第一个子元素

18.element.setAttribute()

设置或者改变指定属性并指定值

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

19.element.style

设置或返回元素的样式属性

20.element.attributes

返回一个元素的属性数组

document.getElementsByTagName("BUTTON")[0].attributes;

21.element.cloneNode()

克隆某个元素

var node=document.getElementById("myList2").lastChild.cloneNode(true);
    document.getElementById("myList1").appendChild(node);

cloneNode()方法可创建指定的节点的精确拷贝。

cloneNode()方法拷贝所有属性和值。

该方法将复制并返回调用它的节点的副本。如果传递给它的参数是true，它还将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。

22.element.getAttributeNode()

返回指定属性节点

var a=document.getElementsByTagName("a")[0];
    var x=document.getElementById("demo");
    x.innerHTML=a.getAttributeNode("target").value;

23.element.className

设置或返回元素的class属性

HTMLElementObject.className
    HTMLElementObject.className=classname

24.element.setAttributeNode()

设置或者改变指定属性节点。

var atr=document.createAttribute("class");
    atr.nodeValue="democlass";
    document.getElementsByTagName("H1")[0].setAttributeNode(atr);

25.element.removeAttribute()

从元素中删除指定的属性

document.getElementsByTagName("H1")[0].removeAttribute("style");

26.element.removeAttributeNode()

删除指定属性节点并返回移除后的节点

var n=document.getElementsByTagName("INPUT")[0];
    var a=n.getAttributeNode("type");
    n.removeAttributeNode(a)

27.element.removeChild()

删除一个子元素

var list=document.getElementById("myList");
    list.removeChild(list.childNodes[0]);

# HTML DOM 属性对象 #

1.attr.name

返回属性名称

2.attr.value

设置或返回属性值

var h=document.getElementsByTagName("H1")[0];
    h.getAttributeNode("style").value="color:green";

3.**html-dom**

document.getElementsByTagName(“form”)

相当于：document.froms

element.getAttribute(“src”)

相当于：element.src

placeholder.setAttribute(“src”,source)

相当于：placeholder.src=source

DOM

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【JQ _DOM】DOM

相关 DOM

相关 DOM

相关 DOM

相关 DOM

相关 DOM

相关 DOM

相关 [DOM] 什么是 DOM

相关 DOM

相关 DOM