sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > HTMLDOM操作的详细介绍

HTMLDOM操作的详细介绍

作者:xuhongji发布时间:2020-09-07分类:Html浏览:75评论:0


导读:HTMLDOM当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)。DOM节点类型文档节点(document,唯一)元...

HTML DOM

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

DOM节点类型

文档节点 (document,唯一)

元素节点 (那些个标签p,p之类)

属性节点(class,src这种)

文本节点(插入在p,p内的文本)

document中的open()定义和用法

open() 方法可打开一个新文档,并擦除当前文档的内容。

语法

document.open(mimetype,replace)

说明

该方法将擦除当前 HTML 文档的内容,开始一个新的文档,新文档用 write() 方法或 writeln() 方法编写。

提示和注释

重要事项:调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来。

注释:属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法,因为脚本或事件句柄自身也会被覆盖。

function createNewDoc()
{
 var newDoc = document.open("test/html","replace");
 var txt = "学习 DOM 非常有趣!";
 newDoc.write(txt);
 newDoc.close();
}

查找元素方式

//查找id为shanghai的元素
var shanghai= docment.getElementById('shanggai');
//查找name为city的元素集合
var citys = docment.getElementByNames('city');
//查找class为btn btn-info的元素集合
var buttons = getElementsByClassName('btn btn-info');
//在citys对象中查找标签名为li的元素集合
var li = citys.getElementsByTagName('li');

改变标签内容和属性

//获取id为"p"的元素
var node = document.getElementById('p');
//增加或改变元素属性
document.getElementById('p').setAttribute("class","window j");
//返回节点名称
var name = node.nodeName;
//返回节点类型
var type = node.nodeType;
//返回父节点
var parent = node.parentNode;
//返回子节点集合
var childs = node.childNodes;
//删除当前节点
node.parentNode.removeChild(node);
//创建节点
var p = document.createElement('DIV');
//替换节点(新的节点,被替换的节点)
node.parentNode.replaceChild(p, node);
//添加子节点
node.appendChild(p);

innerText、innerHTML、nodeValue 三者的区别

innerText: 设置或获取位于启始标签和结束标签之间的字符串

Hello World

//输出为"Hello World"var p = document.getElementById('p').innerText; //输出为"" var input= document.getElementById('input').innerText;

innerHTML: 设置或返回位于启始标签和结束标签之间的 HTML文本

Hello World

//输出为" Hello World"var p = document.getElementById('p').innerHTML;

nodeValue: 设置或返回属性节点和文本节点的值。

Hello World

var p = document.getElementById('p');var span = document.getElementById('span');//输出为null,因为p属于元素节点,元素节点是没有值的console.log(p.nodeValue); //输出为"p class" 属性节点是有值的console.log(p.getAttributeNode('class').nodeValue); //输出为"p"console.log(p.getAttributeNode('id').nodeValue); //输出为"Hello World",span实际上有一个子节点,该节点是一个文本节点,//文本节点虽然没有标签,但它依然是一个节点console.log(span.childNodes[0].nodeValue);

以上就是HTML DOM操作的详细介绍的详细内容,更多请关注 第一PHP社区 其它相关文章!


欢迎 发表评论:

Html排行
«   2021年1月   »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章