DOM及其扩展

来源：互联网发布：淘宝助理连打只能2单编辑：程序博客网时间：2024/06/08 17:33

元素对象的标准特性：

1 .obj.id

2. obj.className

3. obj.title

4.obj.lang ：元素内容的语言代码

5.obj.dir :ltr 或rtl

自定义特性 ：加 data- 前缀

特殊的特性： style onclick

取得特性：

getAttribute() setAttribute() removeAttribute()

注意：自定义特性只能通过以上方法取得和设置，不能用对象.属性的方法

元素对象的非标准属性：

例：<form action=”” method=”” age=”” sex=”” ></form>

元素对象js属性：

obj.tagName : 获取标签名

obj.innerHTML：标签里面的所有内容

obj.outerHTML; 包括标签在内的所有东西

obj.textContent; 标签内的文本内容

获取元素对象的方法：

document.getElementById();

obj/document.getElementsByTagName();

document.getElementsByClassName();

document.getElementsByName();

querySelector():接收一个css选择符,返回匹配的第一个元素

querySelectorAll();返回一个Nodelist实例，使用[] 或者 item()访问

直接获取dom元素对象(集合)：

1. document.documentElement:指向<html>元素

2. document.head;

3. document.title;

document.URL :页面完整的url

document.domain :取得域名，将其设置为URL包含的域

document.referrer: 取得来源页面的url

4. document.body;

5. document.links;取得带有href特性的<a>元素

6. document.images;

7. document.forms;

8. document.anchors; 取得带有name特性的<a>元素

9. document.rows;

10. tableObj.rows;

11. selectObj.options;

12 document.doctype;

Node

节点属性

nodeValue nodeName nodeType

节点关系

childNodes属性保存着NodeList对象(类数组),有length属性

访问：方括号 item();

parentNode 父节点

firstChild : childNodes[0]

lastChild : childNodes[somenNode.childNodes.length -1]

previousSibling 前一个节点

nextSibling 下一个节点

ownerDocument ：指向表示整个文档的文档节点

hasChildNodes() :包含子节点则返回true

操作节点

appendChild() ：参数：要添加的节点（向末尾添加节点）

insertBefore(): 插入到某个节点前面

参数：要插入的节点、参照节点

replaceChild(): 参数：要插入的节点、要替换的节点

removeChild(): 参数：要移除的节点

注意：以上方法操作某节点的子节点，要取得父节点

cloneNode() 参数：布尔值表示是否执行深复制，复制完可以用上述方法插入到文档中

浅复制：只复制节点本身

深复制: 复制节点及其整个子节点树

normalize() : 处理文档树中的文本节点 (使规范化)

用于：文本节点不包含文本或接连两个文本节点

DOM 的一致性检测

document.implementation 属性：提供相应信息和功能

hasFeature():

参数：要检测的DOM功能名称和版本号,存在则返回true

var hasXmlDom=document.implementation.hasFeature(“XML”,”1.0”);

将输出流写入到页面

document.write() ：原样写入

document.writeln() : 在字符串末尾添加一个换行符（\n）

.close() .open() :分别用于关闭和打开页面的输入流

Element

常见特征：

nodeType:1

nodeName:元素的标签名

nodeValue: null

div.tagName == div.nodeName ，在HTML中大写

比较操作：

if(mydiv.tagName.toLowerCase()== "div"){

alert(1);

}

创建元素

document.createElement() :参数：要创建元素的标签名

在IE中可以为这个方法传入完整的元素标签

Text

nodeType:3

nodeName: ”#text”

nodeValue: 节点包含的文本

nodeValue 和data 两个属性包含的值相同

操作文本的方法

appendData(text): 将文本添加到节点末尾

vartext=document.createTextNode("hello");

document.body.appendChild(text);//hello

text.appendData(" world!");//hello world

deleteData(offset,count);从offset指定位置开始删除count个字符

insertData(offset,text);

replaceData(offset , count , text);

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

normalize():在包含多个文本节点的父元素上调用，会合并所有文本节点

splitText(); 与normalize()作用相反

创建注释节点

document.createComment();

nodeType:8

nodeName:”#comment”

nodeValue:注释的内容

除了没有splitText() ，其他与text 类似

DocumentType

nodeType :10

nodeName: doctype 的名称

nodeValue:null

document.doctype.name //HTML

DocumentFragment 文本片段

nodeType: 11

nodeName：#document-fragment

nodeValue: null;

创建文本片段节点

document.createDocumentFragment();

添加到文档片段中的节点不属于文档树

作用如下：为ul一次性添加三个列表项

例：var fragment=document.createDocumentFragment();

var ul=document.getElementById('mylist');

var li=null;

for(var i=0;i<3;i++){

li=document.createElement("li");

li.appendChild(document.createTextNode("Item"+(i+1)));

fragment.appendChild(li);

}

ul.appendChild(fragment);

Attr

nodeType:2

nodeValue:特性的名称

nodeName: 特性的值

不属于DOM文档树的一部分

创建特性节点

document.createAttribute(‘align’);

添加特性

element.setAttributeNode(attr);

访问特性

element.getAttributeNode('align').value

element.getAttribute(‘align’);

动态脚本

function loadScript(code){

varscript=document.createElement("script");

script.type="text/javascript";

try{

script.appendChild(document.createTextNode(code));

}catch(ex){

script.text=code;// 兼容IE

}

document.body.appendChild(script);

}

loadScript("alert(1)");

动态样式

function loadStyle(css){

varstyle=document.createElement("style");

style.type="text/css";

try{

style.appendChild(document.createTextNode(css));

}catch(ex){

style.styleSheet.cssText=css; //兼容IE

}

varhead=document.getElementsByTagName("head")[0];

head.appendChild(style);

}

loadStyle("body{background:red;}");

操作表格

table

caption

tBodies

tFoot

tHead

rows

tbody

rows

deleteRow(pos);

insertRow(pos);

tr cells deleteCell(pos) insertCell(pos)

NodeList 、NamedNodeMap、HTMLCollection 三个集合都是动态的，保存着最新的、最准确的信息

元素遍历

属性

childElementCount

firstElementChild

lastElementChild

previousElementSibling

nextElementSibling

操作类名

属性：classList ：有length属性表示包含多少个元素[] /item()

方法：

obj.classList.add(value); 添加

obj.classList.remove(value); 删除

obj.classList.contains(value);//true /false

obj.classList.toggle(value); 有则删除，无则添加

焦点管理

document.activeElement :引用DOM中当前获得了焦点的元素

document.hasFocus():用于确定文档是否获得了焦点

HTMLDocument的变化

readyState属性

两个值:loading 正在加载文档, complete 已经加载完文档

兼容模式

判断浏览器采用了那种渲染模式

标准模式：document.compatMode 为‘CSS1Compat’

混杂模式：document.compatMode 为‘BackCompat’

Head属性

var head=document.head||document.getElementsByTagName(‘head’)[0];

charset :

表示文档实际使用的字符集

修改：<meta> 、响应头部、直接设置charset属性

自定义数据属性

1. 添加非标准属性，加前缀 data - 为元素提供与渲染无关的信息

2. dataset 属性：访问自定义属性的值

阅读全文

0 0