Document类型
Javascript通过使用Document类型表示文档。在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面。document对象是window对象的一个属性可以直接调用。HTMLDocument继承自Document。
1.属性
documentElement :始终指向HTML页面中的<html>元素。
body :直接指向<body>元素
doctype :访问<!DOCTYPE>, 浏览器支持不一致,很少使用
URL :取得完整的路径URL
domain :取得域名,并且可以进行设置,在跨域访问中经常会用到。
referrer :取得链接到当前页面的那个页面的URL,即来源页面的URL。
images :获取所有的img对象,返回HTMLCollection类数组对象
forms :获取所有的form对象,返回HTMLCollection类数组对象
<script>
window.onload=function(){
//document-*-表示整个html文档页面
console.log(document)
// html元素
console.log(document.documentElement);
// body元素
console.log(document.body);
// img元素
console.log(document.images)
// form元素
console.log(document.forms);
// a标签 带有href属性的
console.log(document.links);
// 获取域名 --只能通过服务器打开
console.log(document.domain,'111');
// 获取文档头信息
console.log(document.doctype);
// 获取文档标题
console.log(document.title);
// 获取URL
console.log(document.URL);
// 获取页面来源地址--只能通过服务器打开
console.log(document.referrer,'222');
}
</script>
2.DOM编程界面
在 DOM 中,所有 HTML 元素都被定义为对象,编程界面是每个对象的属性和方法。
<body>
<p id="demo"></p>
<script>
//getElementById是方法
//表示通过id访问元素,
var p1 = document.getElementById("demo");
//innerHTML是属性 用于设置或获取元素节点的内容
//向p标签插入内容
p1.innerHTML = "Hello World!";
</script>
</body>
3.方法
3.1查找元素
(1)getElementById()
通过元素 id 来查找元素,返回匹配指定id的一个元素
用法:document.getElementById(id名)
(2)getElementsByTagName()
通过标签名来查找元素,返回一个伪数组,包含匹配指定标签名的所有元素。
用法:document.getElementsByTagName(name)
(3)getElementsByClassName()
通过类名来查找元素,返回一个伪数组,包含匹配指定类名的所有元素
用法:document.getElementsByClassName(name)
(4)document.querySelector()
返回文档中匹配指定的CSS选择器的第一元素
用法:document.querySelector()
<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
console.log(document.querySelector("#div1"));//<div id="div1">
// 替换第一个匹配元素的文本内容
document.querySelector("#div1").innerHTML = 'Hollo'
</script>
(5)document.querySelectorAll()
HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表
用法:document.querySelectorAll()
<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
console.log(document.querySelectorAll(".div1"));//NodeList [ div.div1, div.div1 ]
</script>
(6)其他方法
document.createElement(element)
用于创建新的HTML元素,与appendChild() 或 insertBefore()方法联合使用可添加元素
<script>
// 创建元素节点p
var p = document.createElement('p');
// 向p标签插入内容
p.innerHTML = '我是一个p标签';
// 将节点插入到body中
document.body.appendChild(p);
</script>
document.write()
向文档写入文本或 HTML 表达式 或 JavaScript 代码。
<script>
document.write("<p>Hello World!</p>");
document.write("Hello Weekend!");
</script>
Element类型
Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象。
1.属性
attributes:返回一个与该元素相关的所有属性的集合。
classList:返回该元素包含的 class 属性的集合。
className:获取或设置指定元素的 class 属性的值。
clientHeight:获取元素内部的高度,包含内边距,但不包括水平滚动条、边框和外边距。
clientTop:返回该元素距离它上边界的高度。
clientLeft:返回该元素距离它左边界的宽度。
clientWidth:返回该元素它内部的宽度,包括内边距,但不包括垂直滚动条、边框和外边距。
innerHTML:设置或获取 HTML 语法表示的元素的后代。
tagName:返回当前元素的标签名。
2.常用方法
element.innerHTML
属性设置或获取HTML语法表示的元素的后代。改变元素的 innerHTM
<div id="div1">我是一个div</div>
<script>
//获取节点的引用
var d1 = document.getElementById('div1');
// 设置新的文本内容
d1.innerHTML = '我是新的内容'
</script>
// 获取节点内部内容得方式和区别
// 1.innerHtml
// 2.innerText
// 3.textContent
console.log(body.innerHTML);//hello<div>one</div><!-- 我是一个注释 -->world
console.log(body.innerText);//hello one world
console.log(body.textContent);//hellooneworld
<body>
hello<div>one</div><!-- 我是一个注释 -->world
</body>
element.attribute = value
<div id="div1">123</div>
<script>
var d1 = document.getElementById('div1');
// 直接将已经存在的属性进行修改
d1.id = 'div2';
</script>
element.getAttribute()
<div id="div1">我是一个div</div>
<script>
var div = document.getElementById('div1');
console.log(div.getAttribute('id')); // div1
</script>
element.setAttribute(attribute, value)
把指定属性设置或更改为指定值。
<div id="div1">我是一个div</div>
<script>
var d1 = document.getElementById('div1');
// 设置div1的class为divCla
d1.setAttribute('class', 'divCla');
</script>
element.style.property
设置或返回元素的 style 属性。
<div id="div1">我是一个div</div>
<script>
var d1 = document.getElementById('div1');
// 获取div1的style样式
console.log(d1.style);
// 设置div1的style
d1.style.backgroundColor = 'red';
</script>
Text类型
Text 节点由 Text 类型表示,包含按字面解释的纯文本,也可能包含转义后的 HTML 字符,但不含 HTML 代码。
Length 文本长度
appendData(text) 追加文本
deleteData(beginIndex,count) 删除文本
insertData(beginIndex,text) 插入文本
replaceData(beginIndex,count,text) 替换文本
splitText(beginIndex) 从beginIndex位置将当前文本节点分成两个文本节点
document.createTextNode(text) 创建文本节点,参数为要插入节点中的文本
substringData(beginIndex,count) 从beginIndex开始提取count个子字符串
综合案例
<div id="container"></div>
<script>
// 创建文本节点
var textNode = document.createTextNode('Hello World!');
// 获取container
var div = document.getElementById('container');
// 将文本节点插入container
div.appendChild(textNode);
// 替换文本
textNode.replaceData(0,5,'Hi');
// 插入文本
textNode.insertData(0, 'Hello')
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。