JS 学习笔记四(DOM)(节点)

简介: JS 学习笔记四(DOM)(节点)

节点

1. // 测试代码
2. <div id="box1">
3. <div id="box2"></div>
4. <div id="box3"></div>
5. <div id="box4"></div>
6. </div>

  • 获取父节点 ○ parentNode 和 parentElement 是一样的,但 parentNode 是W3C标准,parentElement 只在IE中可用。 ○ 当父节点的 nodeType 不是1,即不是element节点的话,它的 parentElement 就会是 null。 ○ 一般情况 parentNode 可以取代 parentElement 的所有功能。 ○ parentElement 匹配的是 parent 为 element 的情况,而 parentNode 匹配的则是 parent 为 node 的情况。element 是包含在 node 里的,它的 nodeType 是1。


var box1 = box3.parentNode; var box1 = box3.parentElement;


  • 获取下一个兄弟节点 ○ nextSibling 的调用者是节点,IE678 中指下一个元素节点(标签),在 火狐 | 谷歌 IE9+以后都指的是下一个节点(包括空文档和换行节点)。 ○ nextElementsibling 在火狐谷歌IE9都指的是下一个元素节点。 ○ 总结:在E678中用 nextSibling ,在 火狐 | 谷歌 IE9+以后用 nextElementSibling。


// 下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling var box4 = box3.nextElementSibling || box3.nextSibling;


  • 获取上一个兄弟节点 ○ previousSibling 的凋用者是节点,IE678 中指前一个元素节点(标签),在 火狐 | 谷歌 IE9+以后都指的是前一个节点(包括空文档和换行节点)。 ○ previousElementSibling 在 火狐 | 谷歌 IE9都指的是前一个元素节点。 ○ 总结:在IE678中用 previousSibling 在 火狐 | 谷歌 IE9+以后用 previousElementSibling。


// 下一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling var box2 = box3.previousElementSibling || box3.previousSibling;


  • 获得单个子节点(也就是父节点中的第一个节点或者最后一个节点) ○ firstChild 的调用者是父节点,IE678 中指第一个子元素节点(标签),在 火 狐 | 谷歌 IE9+以后都指的是第一个节点(包括空文档和换行节点)。 ○ firstElementChild 在 火狐 | 谷歌 IE9都指的第一个元素节点。 ○ lastElementChild 与 lastChild 同理。


// 第一个子节点 = 父节点.firstElementChild || 父节点.firstChild


// 获得父节点里面的首个子节点 var box2 = box1.firstElementChild || box1.firstChild;


// 获得父节点里面的最后个子节点 var box4 = box1.lastElementChild || box1.lastChild;


  • 获得所有子节点(也就是父节点中的所有节点) ○ childNodes 它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性文本节点 (他还是W3C的亲儿子)。 ○ 火狐 | 谷歌 等高本版会把 换行 也看做是子节点。 ○ ○ ○ 文章下面有 nodeType / nodeName / nodeValue 的使用介绍。


// 子节点数组 = 父节点.childNodes var childs = box1.childNodes;


  • JS中 childNodes 与 children 的区别 ○ children 是非标准属性,它返回指定元素的子元素集合。 ○ 但它只返回HTML节点,甚至不返回文本节点,虽然不是标准的DOM属性,但它和 innerHTML 方法一样,得到了几乎所有浏览器的支持。 ○ children 在E6/7/8中包含注释节点。 ○ 在IE678中,注释节点不要写在里面。 ○ children 用的最多。


// 子节点数组 = 父节点.children var childs = box1.children;


  • 增删节点 ○ append()、appendChild() 和 innerHTML 的区别


// 新建节点 var box5 = document.createElement('div');


// 插入节点 - 父节点的最后面插入 box1.appendChild(box5);


// 插入节点 - 父节点的最前面插入 box1.insertBefore(box5);


// 删除节点 box1.removeChild(box5);


// 不知道父级节点的情况可以这么删除自己 box5.parentNode.removeChild(box5);


// 复制节点 - true: 表示深复制(复制节点以及其所有的子节点) // 复制节点 - false: 表示浅复制(复制节点本身,不复制子节点) box5.cloneNode(true);


节点属性


  • 属性,赋值获取两种方式 ○ 元素节点.属性 || 元素节点[属性]


var box3 = document.getElementById('box3'); // 赋值id box3.id = 值; // 获取id console.log(box3.id); console.log(box3['id']);


○ 元素节点.方法();


// 获取id
console.log(box3.getAttribute('id'));
// 赋值id
box3.setAttribute('id','new_id');
// 移除id
box3.removeAttribute('id');

上面两种方式都可以,区别就是第一种如果随意添加一个值不会显示在标签上,但是能获取的到。第二种则是既能显示在标签上又能获取的到。但是两种赋值方式不可以使用对方的取值方式,也就是你用哪种方式添加的属性,还得用哪种方式的取值方式才能得到属性值,否则会使 null 或者 undefined。 例如:


// 这种在 box3 标签上是看不到的,但是可以使用这个属性。
box3.dzm = 'dzm';
// 这种在 box3 标签上是看的到,同时也可以使用这个属性。
box3.setAttribute('dzm','dzm');

  • a 标签点击之后不做跳转
    // 方式一
    // 方式二

  • value / innerHTML / innerText / textContent 的区别 ○ 老版本的火狐不支持 innerText,IE678不支持 textContent。 ○ p不能嵌套p,h1不能嵌套h1,a连接内部不能嵌套a连接。


// value: 标签的value属性。 console.log(document.getElementById('box1').value)


// innerHTML: 获取双闭合标签里面的内容(识别标签)。 console.log(document.getElementById('box1').innerHTML) document.getElementById('box1').innerHTML = "


dzm

"; // 输出 dzm

// innerText: 获取双闭合标签里面的内容(不识别标签)。 console.log(document.getElementById('box1').innerText) document.getElementById('box1').innerText = "


dzm

"; // 输出

dzm


  • nodeType / nodeName / nodeValue ○ nodeType == 1 时才是元素节点(标签)。 ○ nodeType == 1 表示是元素节点,元素就是标签。 ○ nodeType == 2 表示是属性节点。 ○ nodeType == 3 表示是文本节点。


// 测试代码


dzm

// 元素节点
var ele = document.getElementById('box');
// 属性节点
var att = ele.getAttributeNode('id');
// 文本节点
var txt = ele.firstChild;;
// 正常输出
console.log(ele); // <div id="box">dzm</div>
console.log(att); // id="box"
console.log(txt); // dzm
// nodeType
console.log(ele.nodeType); // 1
console.log(att.nodeType); // 2
console.log(txt.nodeType); // 3
// nodeName
console.log(ele.nodeName); // DIV
console.log(att.nodeName); // id
console.log(txt.nodeName); // #text 
// nodeValue
console.log(ele.nodeValue); // null
console.log(att.nodeValue); // box
console.log(txt.nodeValue); // dzm

相关文章
|
29天前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
11 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
11天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
27天前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
21 0
|
4天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
10 0
|
4天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
10 4
|
15天前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
|
17天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
17 4
|
24天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
1月前
|
JavaScript 前端开发
JS获取DOM元素的八种方法(含代码,简单易懂)
JS获取DOM元素的八种方法(含代码,简单易懂)