JS之DOM

作者: 好奇的猫猫猫 | 来源:发表于2018-09-20 13:02 被阅读0次

获得当前子节点childNodes:把文本内容也当成了节点之一
文本内容也是属于节点的子节点
解决方法:使用children:包含了节点 不包含文本
获得标签的首个子节点:firstChild,获得的首节点是文本节点
firstElementChild:获得的真正的标签节点
注意:获得子节点分为两种
1.将文本内容也当成节点之一
childNodes
firstChild
lastChild
2.获得以标签为内容的子节点
children
firstElementChild
lastElementChild
获得当前节点的名称:nodeName
获得当前节点的父节点:parentNode
创建节点:createElement,--->创建完之后记得添加到指定节点:x.appendChild(y)是将标签添加到父标签的最后一个子节点
insertBefore(新标签,旧标签)添加到某个标签之前
replaceChild(新标签,旧标签)替换某个标签
removeChild()删除标签
document常用方法和属性:
常用属性:body
title
domain
url

var body = document.body;
console.log(body)

var title = document.title;
console.log(title)

//domain:域名
//http:通信协议
//www.baidu.com域名
var domain = document.domain;
console.log(domain)

var url = document.url;
console.log(url)

//标签的可视属性
var wrap = document.querySelector("#wrap");
console.log(wrap.id);
console.log(wrap.className);
console.log(wrap.style);
var img = document.querySelector("img");
img.src = "";
img.alt = "";
//添加额外的可视属性
wrap.setAttribute("hello","值");//设置属性
var value = wrap.getAttribute("hello")//得到属性
wrap.removeAttribute("hello")//移除属性
console.log(value)
//添加不可视的属性
wrap.name = "你好"
//1.offsetLeft,offsetTop,offsetWidth,offsetHeight
//2.clientWidth,clientHeight,scrollHeight,scrollWidth,scrollLeft,scrollTop

//offsetLeft,offsetTop,offsetWidth,offsetHeight是不包含margin的 
//clientWidth,clientHeight不包含border和margin
//scrollHeight,scrollWidth是可滚动范围
//scrollLeft,scrollTop设置滚动开始的位置

相关文章

  • js基础之DOM中元素对象的属性方法

    js基础之DOM中元素对象的属性方法

  • Day7:virtual dom & MVVM

    virtual dom 什么是virtual dom 虚拟dom 用JS模拟DOM结构 DOM变化的对比,放在JS...

  • JS之DOM

    一、节点层次 DOM是针对 HTML 和 XML 文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节...

  • JS之DOM

    获得当前子节点childNodes:把文本内容也当成了节点之一文本内容也是属于节点的子节点解决方法:使用child...

  • js之DOM

    DOM整理。简书貌似不支持makedown文件,发个图片格式吧

  • virtual dom

    virtual dom --- 即虚拟dom 1.用js模拟DOM结构 2.DOM变化的对比,放在js层来做(js...

  • React 入门(阮一峰教程笔记)

    一 react.js react-dom.js Brower.js react.js 核心库 react-dom....

  • DOM

    DOM JS的组成 ECMAScript js的基础语法 DOM 文档对象模型 BOM ...

  • 面试中React与Vue的比对 / 面试/mvvm/virtua

    1.virtual dom 用JS模拟DOM结构,DOM变化的对比,放在JS层做,以提高重绘性能 DOM操作昂贵,...

  • JS第七天-03

    DOM DOM树结构关系代码示例: 一、JS中标签关系 二、JS操作页面标签 三、JS操作DOM一般步骤 1、创建...

网友评论

      本文标题:JS之DOM

      本文链接:https://www.haomeiwen.com/subject/bchwnftx.html