分类目录归档:关于wp

DOM节点类型——12种DOM节点类型

前面的话

DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成。

总括

一般地,节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同,这三个属性的值也不相同

nodeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常数值

元素节点              Node.ELEMENT_NODE(1)
属性节点              Node.ATTRIBUTE_NODE(2)
文本节点              Node.TEXT_NODE(3)
CDATA节点              Node.CDATA_SECTION_NODE(4)
实体引用名称节点       Node.ENTRY_REFERENCE_NODE(5)
实体名称节点          Node.ENTITY_NODE(6)
处理指令节点          Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点              Node.COMMENT_NODE(8)
文档节点              Node.DOCUMENT_NODE(9)
文档类型节点          Node.DOCUMENT_TYPE_NODE(10)
文档片段节点          Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点            Node.NOTATION_NODE(12)

DOM定义了一个Node接口,这个接口在javascript中是作为Node类型实现的,而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。所以,IE8-浏览器并不支持Node对象的写法

//在标准浏览器下返回1,而在IE8-浏览器中报错,提示Node未定义
console.log(Node.ELEMENT_NODE);//1

nodeName

nodeName属性返回节点的名称

nodeValue

nodeValue属性返回或设置当前节点的值,格式为字符串

接下来,将按照节点类型的常数值对应顺序,从1到12进行详细说明

 

元素节点

元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值是1,节点名称nodeName值是大写的标签名,nodeValue值是null

以body元素为例

// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true

 

特性节点

元素特性节点attribute对应网页中HTML标签的属性,它只存在于元素的attributes属性中,并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2,节点名称nodeName值是属性名,nodeValue值是属性值

现在,div元素有id=”test”的属性

<div id="test"></div>
<script>
var attr = test.attributes.id;
//2 'id' 'test'
console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
console.log(Node.ATTRIBUTE_NODE === 2);//true    
</script>

 

文本节点

文本节点text代表网页中的HTML标签内容。文本节点的节点类型nodeType值是3,节点名称nodeName值是’#text’,nodeValue值是标签内容值

现在,div元素内容为’测试’

<div id="test">测试</div>
<script>
var txt = test.firstChild;
//3 '#text' '测试'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true    
</script>

 

CDATA节点

CDATASection类型只针对基于XML的文档,只出现在XML文档中,表示的是CDATA区域,格式一般为

<![CDATA[
]]>

该类型节点的节点类型nodeType的值为4,节点名称nodeName的值为’#cdata-section’,nodevalue的值是CDATA区域中的内容

 

实体引用名称节点

实体是一个声明,指定了在XML中取代内容或标记而使用的名称。 实体包含两个部分, 首先,必须使用实体声明将名称绑定到替换内容。 实体声明是使用 <!ENTITY name “value”> 语法在文档类型定义(DTD)或XML架构中创建的。其次,在实体声明中定义的名称随后将在 XML 中使用。 在XML中使用时,该名称称为实体引用。

实体引用名称节点entry_reference的节点类型nodeType的值为5,节点名称nodeName的值为实体引用的名称,nodeValue的值为null

//实体名称
<!ENTITY publisher "Microsoft Press">
//实体名称引用
<pubinfo>Published by &publisher;</pubinfo>

 

实体名称节点

上面已经详细解释过,就不再赘述

该节点的节点类型nodeType的值为6,节点名称nodeName的值为实体名称,nodeValue的值为null

 

处理指令节点

处理指令节点ProcessingInstruction的节点类型nodeType的值为7,节点名称nodeName的值为target,nodeValue的值为entire content excluding the target

 

注释节点

注释节点comment表示网页中的HTML注释。注释节点的节点类型nodeType的值为8,节点名称nodeName的值为’#comment’,nodeValue的值为注释的内容

现在,在id为myDiv的div元素中存在一个<!– 我是注释内容 –>

<div id="myDiv"><!-- 我是注释内容 --></div>
<script>
var com = myDiv.firstChild;
//8 '#comment' '我是注释内容'
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true    
</script>

 

文档节点

文档节点document表示HTML文档,也称为根节点,指向document对象。文档节点的节点类型nodeType的值为9,节点名称nodeName的值为’#document’,nodeValue的值为null

<script>
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true    
</script>

 

文档类型节点

文档类型节点DocumentType包含着与文档的doctype有关的所有信息。文档类型节点的节点类型nodeType的值为10,节点名称nodeName的值为doctype的名称,nodeValue的值为null

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var nodeDocumentType = document.firstChild;
//10 "html" null
console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
console.log(Node.DOCUMENT_TYPE_NODE === 10);
</script>
</body>
</html>

 

文档片段节点

文档片段节点DocumentFragment在文档中没有对应的标记,是一种轻量级的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。该节点的节点类型nodeType的值为11,节点名称nodeName的值为’#document-fragment’,nodeValue的值为null

<script>
var nodeDocumentFragment = document.createDocumentFragment();    
//11 "#document-fragment" null
console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
</script>

 

DTD声明节点

DTD声明节点notation代表DTD中声明的符号。该节点的节点类型nodeType的值为12,节点名称nodeName的值为符号名称,nodeValue的值为null

 

最后

在这12种DOM节点类型中,有一些适用于XML文档,有一些是不常用的类型。

HBuilder快捷键以及快速生成代码行

HBuilderX快捷键

HBuilderX快捷键

快速生成代码行

1.在body内输入div.abc按下tab键

效果:<div class=”abc”></div>

2.在body内输入div#abc按下tab键

效果:<div id=”abc”></div>

3.在body内输入ul>li{小花}*3按下tab键

效果:<ul>
                 <li>小花</li>
                 <li>小花</li>
                 <li>小花</li>
         </ul>

 

4.在body内输入div>a[href='#']{小花}*3按下tab键

效果:<div>
                 <a href=”#”>小花</a>
                 <a href=”#”>小花</a>
                 <a href=”#”>小花</a>
        </div>

 

5.在body内输入select>option{$}*5按下tab键

效果:<select name=”” id=””>
                 <option value=””>1</option>
                 <option value=””>2</option>
                 <option value=””>3</option>
                 <option value=””>4</option>
                 <option value=””>5</option>
          </select>

6.在body内输入select>option[value='花香']{$}*5>a[href='#']{小花}按下tab键

效果:<select name=”” id=””>
                 <option value=”花香”>1<a href=”#”>小花</a></option>
                 <option value=”花香”>2<a href=”#”>小花</a></option>
                 <option value=”花香”>3<a href=”#”>小花</a></option>
                 <option value=”花香”>4<a href=”#”>小花</a></option>
                 <option value=”花香”>5<a href=”#”>小花</a></option>
        </select>
属性值用[ ]填充,文本内容用{ }填充,*数字:代表生成的元素个数

CSS Zen Garden禅意花园中有这样一段话~

 E文看不懂:那咱们用百度翻释下吧:记忆力越来越差,还是文章起来吧~
View source is a feature, not a bug. Thanks for your curiosity and   interest in participating!

查看源代码是一种特性,而不是一个bug。感谢你的好奇心和兴趣参与!

Here are the submission guidelines for the new and improved csszengarden.com:

以下是新的和改进的csszengarden.com的提交指南:

– CSS3? Of course! Prefix for ALL browsers where necessary.-CSS3?当然!必要时为所有浏览器添加前缀。
– go responsive; test your layout at multiple screen sizes.-快速响应;以多种屏幕大小测试布局。
– your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android-您的浏览器测试基准:ie9+、最新的chrome/firefox/safari和ios/android
– Graceful degradation is acceptable, and in fact highly encouraged.优雅降级是可以接受的,事实上非常鼓励。
– use classes for styling. Don’t use ids.使用类样式。不要使用id。
– web fonts are cool, just make sure you have a license to share the files. Hosted services that are applied via the CSS file (ie. Google Fonts) will work fine, but  most that require custom HTML won’t. TypeKit is supported, see the readme on this page for usage instructions: https://github.com/mezzoblue/csszengarden.com/

-web字体很酷,只要确保你有一个共享文件的许可证。主办通过css文件(即google字体)应用的服务可以正常工作,但是大多数需要自定义HTML的都不支持。支持typekit,请参阅使用说明页面:https://github.com/mezzoblue/csszengarden.com/

And a few tips on building your CSS file:

还有一些关于构建css文件的提示:

– use :first-child, :last-child and :nth-child to get at non-classed elements

-使用:first child、:last child和:nth child获取非类元素

– use ::before and ::after to create pseudo-elements for extra styling

-使用::before和::after创建用于额外样式设置的伪元素

– use multiple background images to apply as many as you need to any element

-使用多个背景图像对任何元素应用所需的任意数量

– use the Kellum Method for image replacement, if still needed. http://goo.gl/GXxdI

-如果仍然需要,请使用kellum方法进行图像替换。http://goo.gl/gxxdi

 

– don’t rely on the extra divs at the bottom. Use ::before and ::after instead. 

-不要依赖底部额外的div。改用::before和::after。

另外:有篇文章很亦意思,评论回复的更有意思啊。

在这里:https://stackoverflow.com/questions/48966786/background-pentagon-in-header

CSS Zen Garden

CSS Zen Garden

Markdown笔记

如果你是有一个佛(lan)系(duo)的心,但又很文(zhuang)艺(suan)的程序员,并且你对其他Markdown编辑器的使用效果感觉不是很好的话,就用Typora吧……

整理了一下学习笔记~先这二个吧~有空再写~

1.first day 2.The third day

 

 

明天新的一周又开启了,但也是这学期的最后一周

时间过得真快,转眼到了学期的最后一周,老师们都要忙着考试,学生们也都要忙着不挂……

最近重温了下前端最基本的内容,在各类语法中转换,前端要学的东西太多,有些不暇~

哈尔滨真的到了夏季,下周的温度也都攀升到了30+,但整个学期都没有获得情绪高涨的东西……

24977_top

React寒假研修班的一节课堂笔记

https://mobile.ant.design/docs/react/use-with-create-react-app-cn

在 create-react-app 中使用

create-react-app 是业界最优秀的 React 相关应用开发工具之一,本文档尝试以此工具来使用 antd-mobile 组件。

安装和初始化

在安装目录按shift+右键>选择在此处打开命令窗口

npm install -g create-react-app1 注意:工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请尝试配置代理或使用其他 npm registry。

create-react-app my-app  生成目录及相关文件2 3 4 cd my-app

进入创建的目录5 npm start

执行npm start6

浏览器自动弹出http://localhost:3000/的页面。

web前端的一节课堂笔记~

02 day_下午

 

Main.js

对象属性

对象属性

事件注册

/事件注册时,应使用jsx的驼峰写法。即从第二个单词和第一个字母大写的方式。 事件注册

事件注册

 

原生js当中的注册事件

Function hello(){

Return <p>hello world</p>

Const ele=<hello></hello>

组件的函数形式及渲染

17——

文件》首选项》用户代码片段》改写。——快速产生代码片段

用户代码片段

用户代码片段

快速产生代码片段

快速产生代码片段

JS在终端里测试:
console.log(n);

Var n=100;

Var str

Console.log(“str输出的结果为:”+str);

终端里

>node .\文件名.js

Js是一门弱类型语言,就是所有的变量的声明都用关键字 var, 对变量里面存储的数据类型要求不严格在,定义阶段变量存储任意类型的数据都可以,只有在编译的时候才会最终确定变量的类型是什么,

1.就是所有的变量声明都用关键字var

2.对变量里面存储的数据类型要求不严格

Console.log(num);

Var num=100;

Console.log(num);

Let  num=200;

Let  num=200;

Num=300;

Console.log(num);

Let声明的变量

Js中的字符串单引双引都可以。

If(30>20)

Let str=’hello tom’

Str=”h

}

Let声明的奕量不会有提升

Const

定义常量,不能重新赋新值,不能被修改

1.4箭头函数

 

 

2.1使用函数定义组件

Export default Foo

使用export导出组件供其它文件引用。

Import Foo from “./foo.js”

一定打开浏览器控制台,检测~

但function的文件也需要前面的import React 和ReactDOM

组件名和导出的名必须一致。

引入时可以利用其它名字引用。如,

Import FooApp form “./foo.js”

组件结构复杂可以单独拿出来设置

functionDemo(props){

import React from ‘react’

import ReactDOM from ‘react-dom’

// const name = “rose”

// const age = 30

// const course = “javascript”

 

// 定义了一个对象

var obj ={   // 这些数据应该是来源于后台的

name:”jack”,

age:22,

course:’css’

}

// 定义一个组件

 

function Demo(props){  // props是一个形参对象,可以获取当前组件上的所有的属性及值

console.log(props);

// return <p>大家好,我的名字是tom,今年20岁了,正在学习html</p>

return <p>大家好,我的名字是{props.name},今年{props.age}岁了,正在学习{props.course}</p>

}

 

// 将组件渲染到页面上

ReactDOM.render(

// <Demo name=”jack” age=”25″ course=”react.js” />,

// <Demo name={name} age={age} course={course} />,

<Demo name={obj.name} age={obj.age} course={obj.course} />,

document.getElementById(‘app’)

)

使用类的方式定义组件

import React from’react’//写完了这行代码之后,打包工具默认就会到当前项目文件

import ReactDOM from’react-dom’//与解析dom相关的模块

 

classHelloextendsReact.Component{//组件中的组件

constructor(){

super()//super类中的一些属性或是方法继承自父类

this.state={

msg:’hello’

}

}

render(){//ES6中新语法的定义函数的方式。

return <p>这是使用类的方式来定义组件===={this.state.msg}</p>

}

}

ReactDOM.render(

<Hello/>,

document.getElementById(‘app’)

)

使用类的方式定义组件

使用类的方式定义组件

使用类的方式定义组件

使用类的方式定义组件

9

 

 

 

 

 

ruby+rt标记的使用

<ruby>标签用于定义ruby注释(中文注音或字符)。与<rt>标签一同使用。

<rt>标签用于定义字符(中文注音或字符)的解释或发音。

 <rp>标签在ruby注释中使用,以定义不支持<ruby>标签的浏览器所显示的内容。

<ruby>

浏览器效果:

Snap11