document类型
// 1.获取html根元素
console.log(document.documentElement);
// 2.获取body标签
console.log(document.body);
// 3.获取选项卡标题
console.log(document.title);
// 4.获取文档url
console.log(document.URL);
// 5.获取域名
console.log(document.domain,'获取域名');
// 6.获取文档头信息
console.log(document.doctype);
// 7.获取页面来源
console.log(document.referrer,'获取页面来源');
// 8.获取页面中所有form标签
console.log(document.forms)
// 9.获取页面中所有img标签
console.log(document.images)
// 10.获取页面中所有的a标签 只能获取带有href属性
console.log(document.links);
获取dom元素
/**
* querySelector 返回第一个css选择器匹配到的元素
* querySelectorAll 返回所有css选择器匹配到的元素
*/
console.log(document.querySelector('div'));
console.log(document.querySelector('#one'));
console.log(document.querySelector('.one'));
console.log(document.querySelectorAll('div'));
/**
* getElementById() 通过id获取元素
*/
console.log(document.getElementById('one'),'获取id为one元素');
/**
* getElementsByClassName 通过类名获取元素
*/
console.log(document.getElementsByClassName('one'));//类数组对象
/**
* 通过标签名获取元素
*/
console.log(document.getElementsByTagName('div'),'通过标签名获取元素');
/**
* getElementsByName 通过name属性获取标签
*/
console.log(document.getElementsByName('username'));
操作方法
1.创建一个节点createElement
2.给元素 设置文本内容 innerHtml innerText
3.新增一个元素节点 appendChild
4.插入节点 insertBefore(要插入的节点,参考节点)
5.替换节点 replaceChild(替换的节点,被替换的节点)
6.删除节点 removeChild(要删除谁)
var div = document.createElement('div');
div.textContent = 'four';
document.body.appendChild(div);
document.body.insertBefore(div,two);
document.body.replaceChild(div,one);
document.body.removeChild(two);
克隆节点
什么是深克隆,什么是浅克隆
* 1.深克隆指的是既克隆节点的样式,还克隆节点内容
* 2.浅克隆指的是只克隆节点的样式
// 克隆节点 cloneNode(true/false) 默认是false 浅克隆 true深克隆
var newNode = div.cloneNode(true);
document.body.appendChild(newNode);
获取元素内部内容方式以及区别? *******************
* 1.textContent 保留代码格式 只能获取文本内容
* 2.innerHTML 保留代码格式 可以识别代码片段 v-html
* 3.innerText 去除前后空格 中间多个空格会被解析为一个空白
var parent = document.getElementById('parent');
console.log(parent.textContent);
console.log(parent.innerHTML);
console.log(parent.innerText);
// 向文档写入标签或者文本
document.write('<h1>一级标题</h1>');
Element类型
var one = document.getElementById('one');
// 返回元素属性组成的集合
console.log(one.attributes);
// 返回属性类名组成列表 类数组对象
console.log(one.classList);
// 修改元素类名
// one.className = 'new';
// 返回元素类名
console.log(one.className);
console.log(one.clientHeight, '获取元素内部高度');
console.log(one.clientWidth, '获取元素内部宽度');
// 修改元素内部内容 innerText 识别代码片段 解析字符串中标签
one.innerText = '<h1>段落标签</h1>';
/**
* 获取属性getAttribute('属性名')
*/
console.log(one.getAttribute('id'));
/**
* 给元素设置属性 setAttribute('属性名','属性值')
*/
one.setAttribute('title', '我是div的title');
// 设置自定义属性
one.setAttribute('flag', '我是自定义属性');
// 给元素或者标签设置css样式
one.style.width = '100px';
one.style.height = '100px';
one.style.backgroundColor='pink';
one.style.fontSize = '20px';
Text类型
// 创建文本
var TextNode = document.createTextNode('hello world');
var div = document.querySelector('div');
// 添加文本
TextNode.appendData('hi');
// 插入文本 beginIndex '插入的字符'
TextNode.insertData(0,'dom');
// 替换文本 beginIndex count '替换字符'
TextNode.replaceData(0,5,'我被替换了');
// 删除文本 参数:beginIndex count
TextNode.deleteData(0,5);
div.appendChild(TextNode);
console.log(TextNode.nodeType);